How to setup TailwindCSS with PostCSS and Webpack

At the time of writing, this works using Tailwind v1.1.2

Reference Repository

File structure

- current_directory/
| dist/
  |-- index.html
| src/
  |-- index.js
  |-- styles.css
| package-lock.json
| package.json
| postcss.config.js
| README.md
| tailwind.config.js
| webpack.config.js

CLI Commands

Bash

npm init # if new project

# install packages
npm install --save-dev \
webpack webpack-cli webpack-dev-server  \
postcss tailwindcss \
postcss-loader css-loader style-loader \

# Setup config files
&& npx tailwind init \
&& touch webpack.config.js \
&& touch postcss.config.js

Configuration files

This is the default from tailwind

Javascript

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

If you don’t want to use webpack-dev-server you don’t have to. Personally, I like it for live-reloading in my browser. All I can really say about this is just pay attention to paths and make sure you check the webpack documentation. They do a far better job of explaining what is going on here.

Javascript

// webpack.config.js
const path = require("path")

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          { loader: "css-loader", options: { importLoaders: 1 } },
          "postcss-loader",
        ],
      },
    ],
  },

  // Optional for webpack-dev-server
  devServer: {
    watchContentBase: true,
    contentBase: path.resolve(__dirname, "dist"),
    open: true,
  },
}

Feel free to add PurgeCSS, postcss-nested, postcss-import, etc here. For the simplicity of this guide, I will not include it here.

Javascript

// postcss.config.js
module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
  ],
}

Use basic tailwind directives, this is where you would import your own components, utilities, and base css.

CSS

/* src/styles.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

This is incredibly important

If you do not import ‘./styles.css’ the tailwind directives will not run and everything you just did above will not even run.

Javascript

// src/index.js
import "./styles.css"

Just a simple html template to play around with

HTML

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Title</title>
  </head>
  <body>
    <div class="text-red-500">Test Input</div>

    <!-- Where webpack will output to -->
    <script src="bundle.js"></script>
  </body>
</html>

Below are commands to run your newly set up repository:

Bash

npx webpack-dev-server # This will let you view it on localhost with live-reload
npx webpack # Will build the project

Javascript

// package.json
{
  // ...
  "scripts": {
    "dev:watch": "webpack-dev-server --mode=development --config webpack.config.js",
    "dev:build": "webpack --mode=development --config webpack.config.js"
  }
  // ...
}

Bash

npm run dev:watch
npm run dev:build

This should get you up and running with tailwindCSS in a development environment. I don’t recommend this for production particularly because it does not have PurgeCSS. This is meant more as a quick reference to start a project. I also recommend digging deeper into webpacks documentation as well as PostCSS to get a better idea on how to use both.

PHP for Beginners - Part 8 - What the heck is PDO?

JS - How to configure webpack-dev-server live-reloading