How to integrate tailwind and webpack

This is a basic foundation setup, for using tailwind in webpack. It will be used when using react.

.
├── package.json
├── postcss.config.js
├── src
│   ├── index.css
│   └── index.js
├── tailwind.config.js
└── webpack.config.js

Clone our previous postcss repo: https://github.com/ynwd/postcss

Install tailwindss

npm i tailwindcss -D

Create tailwind config

npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of your project:

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

Update tailwind config to remove any unused classes for the smallest file size

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

Update postcss config to use tailwind

module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

Include Tailwind in your CSS

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Update entry point:

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

Compile

npx webpack

You can get the final source code here: https://github.com/ynwd/postcss/tree/tailwind

Blog

How to integrate tailwind and webpack

ynwd

Join Our Newsletter. No Spam, Only the good stuff.

Related