Skip to content

Instantly share code, notes, and snippets.

@bradtraversy
Last active June 12, 2024 15:24
Show Gist options
  • Save bradtraversy/1c93938c1fe4f10d1e5b0532ae22e16a to your computer and use it in GitHub Desktop.
Save bradtraversy/1c93938c1fe4f10d1e5b0532ae22e16a to your computer and use it in GitHub Desktop.
Setup Webpack with Tailwind CSS

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
Copy link

This is great, thanks! I can't seem to add styles dynamically though. I have tried this adjustment in the tailwind config:

  • content: ['./dist/*.html']
  • content: ['./dist/*.{html, js}']

I figured this would read the bundle.js file and apply the styles within it but it doesn't seem to work. Anybody have any suggestions to get this working?

@tolu2507
Copy link

thanks so much this really helped me out

@Kretuu
Copy link

Kretuu commented Mar 5, 2023

This is great, thanks! I can't seem to add styles dynamically though. I have tried this adjustment in the tailwind config:

  • content: ['./dist/*.html']

  • content: ['./dist/*.{html, js}']

I figured this would read the bundle.js file and apply the styles within it but it doesn't seem to work. Anybody have any suggestions to get this working?

I checked it and you can use "content: ['./dist/*.{html, js}']" to apply styles to bundle.js. You need only to remember that if you are compiling for the first time and bundle.js does not exist, the tailwind won't work. In my case I just compiled my source code two times, so for the first time bundle.js is created without tailwind and when I compile for the second time, bundle.js already exists, so tailwind can be imported.

@BradySavarie
Copy link

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

@azpoint
Copy link

azpoint commented Mar 18, 2023

Thanks for the additional video of this.

Copy link

ghost commented Apr 6, 2023

thanks

@famirqfr
Copy link

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

@grievercr
Copy link

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
Copy link

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
Copy link

how to deploy your tailwind project through github?

@kobamkode
Copy link

Thanks alot!

@volodalexey
Copy link

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
Copy link

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
Copy link

thank you so much. you are a life saver.

@MALB1993
Copy link

dankeschön :)

@vitaliykreminskiy
Copy link

Thank you so much!

@jr0jas
Copy link

jr0jas commented Mar 2, 2024

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

@bradtraversy and all, thanks

@NonieBenks
Copy link

Phew, great guide, thank youu!

@0Chan-smc
Copy link

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
Copy link

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: {},
})

@fn-cafeina
Copy link

Muchas gracias, realmente me funcionó :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment