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

@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