Setup Tailwind CSS with Webpack

Published in

Level Up Coding

2 min readJan 22, 2021

It took me quite a bit of time to setup Tailwind CSS with Webpack, so I’ve documented my steps here to help my future self and others.

Installation

Make a directory and cd into it.

mkdir tailwind-webpack-test && cd tailwind-webpack-test

2. Create package.json.

npm init -y

3. Install webpack along with the necessary loaders.

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env style-loader css-loader postcss postcss-loader postcss-preset-env

4. Install tailwindcss.

npm install --save-dev tailwindcss

Setup

Create webpack entry and output points.

mkdir dist src && touch dist/index.html src/index.js src/style.css

2. Copy the following into webpack.config.js in the root of your directory.

const path = require('path');module.exports = {  mode: 'production',  entry: './src/index.js',  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'bundle.js',  },  module: {    rules: [      {        test: /\.js$/i,        include: path.resolve(__dirname, 'src'),        use: {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env'],
          },        },      },      {        test: /\.css$/i,        include: path.resolve(__dirname, 'src'),        use: ['style-loader', 'css-loader', 'postcss-loader'],      },    ],  },  devServer: {    static: 'dist',
    watchContentBase: true,  },};

3. Copy the following into src/style.css.

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

4. Generate tailwind.config.js by running npx tailwindcss init and add './dist/*.html' to the purge array. Tailwind CSS will purge all styles which are not used by the files specified in the purge array.

module.exports = {  purge: ['./dist/*.html'],  darkMode: false, // or 'media' or 'class'  theme: {    extend: {},  },  variants: {  extend: {},  },  plugins: [],};

5. Copy the following into postcss.config.js.

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

6. Open src/index.js and add this line to import our css.

import './style.css';

7. Link our bundle.js in our HTML by adding this line just before the closing body tag.

<script src="bundle.js"></script>

8. Add the following scripts in your package.json to optimize your workflow. We’re setting node environment in our build script because tailwind won’t purge any css files unless the environment is set to production.

"scripts": {
    "start": "webpack serve --mode=development --open",
    "build": "export NODE_ENV=production && webpack"
},

Test

Open up your dist/index.html and add some hello world code and then run npm start to open your project in your default browser.

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Webpack Test</title>
</head><body>
  <h1 class="bg-red-900 text-white">Hello world</h1>
  <script src="bundle.js"></script>
</body></html>

Congrats!! If you see white text with a red background, you’ve succefully setup tailwind :)

Note: If you want to use stylelint to lint your project, make sure to add the following rule in your .stylelintrc.json.

"rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "extends",
          "apply",
          "tailwind",
          "components",
          "utilities",
          "screen"
        ]
      }
    ]
  }

Setup Tailwind CSS with Webpack

Installation

Setup

Test

Written by Meron Ogbai