bradtraversy/tailwind-webpack-setup.md

Last active November 9, 2024 13:00

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

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

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