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

kalivm90 commented Jan 12, 2023

What to do if I don't put index.html into the dist directory. What I wanted to try is put all the html, css, js and images into the src folder and build files into the dist folder. What to do in this case, any idea?

I'd like to know too

Let me know if you already sort out the problem. I have came up with one solution though

You can try HtmlWebpackPlugin for this . You can create a template.html inside your src folder

This is what I thought but I just tried it and its not working, the html is there but the styles are left out.

AhmadSinaSaeedi commented Jan 20, 2023

Thanks, Brad best description

albertv-devpro commented Jan 24, 2023

@bradtraversy thanks for the tailwind course am really enjoying it. i still get this swiggy lines on the style.css file as mentioned in your course video to install post css. despite installing it the lines still appears in this form. what should i do. i have tried it in both mac an windows PC its still occurring.

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

darkmekker commented Feb 24, 2023

@albertv-devpro In VS Code, go to Settings, then search for 'unknown' and look for CSS > Lint: Unknown At Rules

Set it from warning to ignore

BradySavarie commented Feb 26, 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?

tolu2507 commented Feb 26, 2023

thanks so much this really helped me out

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

vectorcr 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