How to minify css with webpack when using tailwind?

@haylee.mertz 

To minify CSS with webpack when using Tailwind, you can take the following steps:

1. Install postcss and cssnano by running the following command:

1

npm install postcss cssnano --save-dev

1. Create a postcss configuration file named postcss.config.js and add the following code:

1
2
3
4
5
6
7
8
9

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

1. Add the postcss-loader to your webpack configuration. Below is an example of how to add it to the module rules in your webpack.config.js file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

module: {
  rules: [
    {
      test: /.css$/i,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
      ],
    },
  ],
}

1. Make sure to import your CSS files in your JavaScript files so that they get processed by webpack. For example:

1

import './styles.css';

1. Run webpack to build your project with the minified CSS. You can do this by running the following command:

1

npx webpack

After following these steps, your CSS files should now be minified by webpack when using Tailwind.