DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
ynwd
ynwd

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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

Install tailwindss

npm i tailwindcss -D
Enter fullscreen mode Exit fullscreen mode

Create tailwind config

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

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: [],
}

Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

Update postcss config to use tailwind

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

Include Tailwind in your CSS

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Update entry point:

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

Enter fullscreen mode Exit fullscreen mode

Compile

npx webpack
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

⬇️ The only reason people scroll to the bottom...

...is because they want to read more. Create an account to bookmark, comment, and react to articles that interest you.