bradtraversy/tailwind-webpack-setup.md

Last active July 25, 2026 14:39

Star (195) You must be signed in to star a gist
Fork (57) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/bradtraversy/1c93938c1fe4f10d1e5b0532ae22e16a.js"></script>
Save bradtraversy/1c93938c1fe4f10d1e5b0532ae22e16a to your computer and use it in GitHub Desktop.

Download ZIP

Setup Webpack with Tailwind CSS

Raw

tailwind-webpack-setup.md

Webpack & Tailwind CSS Setup

Create your package.json

npm init -y

Create your src folder

Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.

Install Tailwind

npm i -D tailwindcss

Install Webpack & Loaders

npm i -D webpack webpack-cli webpack-dev-server style-loader css-loader postcss postcss-loader postcss-preset-env

Create webpack.config.js in the root and add this to it...

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist'),
    },
    port: 3000,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        include: path.resolve(__dirname, 'src'),
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
}

Add Tailwind Directives

Create a style.css in your src folder and add these 3 lines

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind Config File

run the following command to generate your tailwind.config.js file and add this to it

module.exports = {
  content: ['./dist/*.html'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

PostCCSS Config File

Create a file in the root called postcss.config.js and add this

const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
    'postcss-preset-env',
    tailwindcss
  ],
};

Add this line to your src/index.js

import './style.css';

Create a dist/index.html file and add this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack App</title>
  </head>
  <body>
    <h1 class="text-4xl text-blue-700">My Webpack + Tailwind App</h1>
    <script src="bundle.js"></script>
  </body>
</html>

Add scripts to package.json

Add the following to your package.json file

"scripts": {
    "dev": "webpack serve",
    "build": "webpack"
  },

Running your app

To build once and create your dist/bundle.js file, run

npm run build

To run your webpack server

npm run dev

You now have Webpack setup along with Tailwind CSS

BradySavarie commented Mar 6, 2023

@Kretuu Great point! I had gotten this working and wasn’t sure why exactly but this seems to clarify what happened

azpoint commented Mar 18, 2023

Thanks for the additional video of this.

ghost commented Apr 6, 2023

thanks

famirqfr commented Jun 13, 2023

I did all step by step but have error
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
expected "{".
╷
2 │ import API from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
│ ^
╵
src\App.css 2:95 root stylesheet

lvillalobos-cr commented Jun 29, 2023

When trying to run npm run dev it is giving the the following error from webpak

ERROR in ./src/style.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;
 @ ./src/index.js 1:0-21

webpack 5.88.1 compiled with 1 error and 1 warning in 162 ms

resuls commented Jul 10, 2023

When trying to run npm run dev it is giving the the following error from webpak

ERROR in ./src/style.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;
 @ ./src/index.js 1:0-21

webpack 5.88.1 compiled with 1 error and 1 warning in 162 ms

I'm having same error, were you able to solve this?

kwaters3 commented Aug 14, 2023

how to deploy your tailwind project through github?

kobamkode commented Sep 29, 2023

Thanks alot!

volodalexey commented Nov 13, 2023

Assume that you already have working project with css-loader & style-loader.
Install missing dependencies:

npm i -D postcss postcss-loader tailwindcss

Add postcss-loader loader into webpack config (that internally should call tailwindcss):

const HtmlWebpackPlugin = require('html-webpack-plugin');

//...
  module: {
    rules: [{
      test: /\.css$/i,
      use: [`style-loader`, 'css-loader', 'postcss-loader'],
      exclude: /node_modules/,
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ]
//...

Check that postcss-loader is the first one in the loaders pipe (applies from right to left 'postcss-loader' -> 'css-loader' -> 'style-loader').
Create base config for postcss.config.js:

const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [tailwindcss],
};

Create base config for tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{ts,tsx,html}'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

This line content: ['./src/**/*.{ts,tsx,html}'] should include all your files that contains tailwind classes. In my cases I have Typescript + React project and html as a base file for HtmlWebpackPlugin.
That is it!

To check that transformation works in html file src/index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Example</title>
</head>

<body class="min-w-[400px]">
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

To check that transformation works in typescript file src/index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';

import './globals.css';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<div>Hoho!<div/>);

Global styles src/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply text-base;
  }
}

Igwanya commented Jan 10, 2024

Thanks brother.. i spent a week on research to use tailwind with jekyll integration. The syntax provided on the homepage and github page were different thanks for some clarity...

vquanguit1102 commented Jan 11, 2024

thank you so much. you are a life saver.

MALB1993 commented Feb 23, 2024

dankeschön :)

vitaliykreminskiy commented Feb 24, 2024

Thank you so much!

jr0jas commented Mar 2, 2024

I create a tailwind-quickstart repo, works fine.
https://github.com/jr0jas/tailwind-quickstart

@bradtraversy and all, thanks

NonieBenks commented Apr 1, 2024

Phew, great guide, thank youu!

0Chan-smc commented Apr 11, 2024

When trying to run npm run dev it is giving the the following error from webpak

ERROR in ./src/style.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;
 @ ./src/index.js 1:0-21

webpack 5.88.1 compiled with 1 error and 1 warning in 162 ms

I'm having same error, were you able to solve this?

In my case, I removed include: path.resolve(__dirname, 'src'), from the rules.
And then Webpack successfully worked.

ltfschoen commented Apr 25, 2024

if you're using next.js and you get the error Module parse failed: Unexpected character '@' (1:0) then it's likely because next-transpile-modules was deprecated, so remove that dependency from package.json as suggested here tailwindlabs/tailwindcss#11229 and here https://www.npmjs.com/package/next-transpile-modules, and most importantly you have to follow the migration guide mentioned here https://github.com/martpie/next-transpile-modules/releases/tag/the-end, for example i had to change my next.config.js file from:

const withPlugins = require("next-compose-plugins")
const withTM = require("next-transpile-modules")(["@nextjs-lerna/shared"])
const withImages = require("next-images")
module.exports = withPlugins([withTM(), withImages], {
  webpack: (config) => {
    return config
  },
  images: {},
})

to instead be:

const withPlugins = require("next-compose-plugins")
const withImages = require("next-images")
module.exports = withPlugins([{transpilePackages: ['my-awesome-package']}, withImages], {
  webpack: (config) => {
    return config
  },
  images: {},
})

ghost commented Jun 10, 2024

Muchas gracias, realmente me funcionó :D

Victorola-coder commented Sep 6, 2024

thanks so much, brad! this came in handy.

ozibryan commented Oct 21, 2024

Every thong appears to work OK - however I was expecting the ,h1> to display blue text ...

My Webpack + Tailwind App

- however this comes out as black... ?? any clues ..

garek007 commented Oct 29, 2024

Brad you're incredible

zoltanszogyenyi commented Nov 21, 2024

I don't think this works with Tailwind v4 anymore.

yotamcuralife commented Dec 1, 2024

Upgraded to tailwind 4 and its all broken now, can you update the guide to V4?

yotamcuralife commented Feb 19, 2025

Please!

charanjit-singh commented Mar 7, 2025 •

edited

Loading

Guys,
I know it's open source work. I'd appreciate if you'd follow me here: https://x.com/cjsingg

So here's tailwind V4 solution:

pnpm add tailwindcss @tailwindcss/postcss postcss postcss-loader -D

Note: -D at end

Now go to your package.json and add:

// in root object
 "postcss": {
    "plugins": {
      "@tailwindcss/postcss": {},
      "autoprefixer": {}
    }
  },

In app.tsx:

import './App.css';

In global.css or App.css:

@import "tailwindcss";

In webpack config

 {
        test: /\.s?css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'], // add "postcss-loader" to CSS loaders
        exclude: /\.module\.s?(c|a)ss$/,
      },

Done!

Thank me here: https://x.com/cjsingg

koraysels commented Mar 9, 2025 •

edited

Loading

Nice! this works fine for development.. But what if you want to do a production build? Sometimes you dont want css through javascript on inlined.. . especially when deploying a multipage application to production.

yotamon commented Mar 10, 2025

Thanks @charanjit-singh, I used Cursor Agent to fix my issues :)

jodiedoubleday commented Mar 24, 2025

Anybody got a good solution for production builds?
https://webpack.js.org/loaders/style-loader/#recommend

Style-loader recommends using mini-css-extract-plugin but for the life of me i can;t get this working properly (tailwind 3 or 4)

maheshj01 commented Apr 6, 2025

Thanks @charanjit-singh This worked

touhid-rahman commented Jul 25, 2026

Anyone has webpack starter code with Tailwind 4?

bradtraversy/tailwind-webpack-setup.md

Webpack & Tailwind CSS Setup

Create your package.json

Create your src folder

Install Tailwind

Install Webpack & Loaders

Create webpack.config.js in the root and add this to it...

Add Tailwind Directives

Tailwind Config File

PostCCSS Config File

Add this line to your src/index.js

Create a dist/index.html file and add this

Add scripts to package.json

Running your app

BradySavarie commented Mar 6, 2023

Uh oh!

azpoint commented Mar 18, 2023

Uh oh!

ghost commented Apr 6, 2023

Uh oh!

famirqfr commented Jun 13, 2023

Uh oh!

lvillalobos-cr commented Jun 29, 2023

Uh oh!

resuls commented Jul 10, 2023

Uh oh!

kwaters3 commented Aug 14, 2023

Uh oh!

kobamkode commented Sep 29, 2023

Uh oh!

volodalexey commented Nov 13, 2023

Uh oh!

Igwanya commented Jan 10, 2024

Uh oh!

vquanguit1102 commented Jan 11, 2024

Uh oh!

MALB1993 commented Feb 23, 2024

Uh oh!

vitaliykreminskiy commented Feb 24, 2024

Uh oh!

jr0jas commented Mar 2, 2024

Uh oh!

NonieBenks commented Apr 1, 2024

Uh oh!

0Chan-smc commented Apr 11, 2024

Uh oh!

ltfschoen commented Apr 25, 2024

Uh oh!

ghost commented Jun 10, 2024

Uh oh!

Victorola-coder commented Sep 6, 2024

Uh oh!

ozibryan commented Oct 21, 2024

My Webpack + Tailwind App

Uh oh!

garek007 commented Oct 29, 2024

Uh oh!

zoltanszogyenyi commented Nov 21, 2024

Uh oh!

yotamcuralife commented Dec 1, 2024

Uh oh!

yotamcuralife commented Feb 19, 2025

Uh oh!

charanjit-singh commented Mar 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

koraysels commented Mar 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yotamon commented Mar 10, 2025

Uh oh!

jodiedoubleday commented Mar 24, 2025

Uh oh!

maheshj01 commented Apr 6, 2025

Uh oh!

touhid-rahman commented Jul 25, 2026

Uh oh!

charanjit-singh commented Mar 7, 2025 •

edited

Loading

koraysels commented Mar 9, 2025 •

edited

Loading