Webpack dev server slow compile on css change with tailwind

Question

I am using webpack, tailwind and postcss. I have seen in many places people saying that postcss is faster than libsass but for me it is working much slower.

In libsass if I make a change to a scss file it compiles in about 40ms. With my webpack setup when running dev server it is taking 1000ms-1500ms every time I make a css change. I know this is not drastic but it is enough to annoy me when I am used to near instant updates to my second monitor.

I think the issue is my webpack setup. My main entry point is index.tsx. At first inside this file I was importing my css so I would end up with:

bundle.js
bundle.css

Anytime I made a change it had to re-compile everything and the tailwind css alone is several mb so this I guess is why it is slow.

If I make a change to small custom css it has to recompile all js and the tailwind css which hasn't changed.

So Ideally what I want is to have these files output:

bundle.js - all ts files referenced from index.ts
bundle.css - if any css is referenced from javascript it will go here
tailwind.css - this is the compiled tailwind styles
main.css - this is just my own styles and should compile very fast because is relatively small file

I removed the css imports from index.tsx and used this config:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    'bundle': './src/index.tsx',
    'tailwind': './src/css/tailwind.css',
    'main': './src/css/main.css',
  },
  mode: 'development',
  devtool: 'inline-source-map',
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {

    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // // only enable hot in development
              hmr: process.env.NODE_ENV === 'development',
              // // if hmr does not work, this is a forceful method.
              // reloadAll: true,
            }
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: './dist',
    port: 3366,
    hot: true,
    writeToDisk: true
  },
};

This does output all the files I mentioned I wanted but it also outputs an unwanted main.js and tailwind.js file.

When I make a change to main.css with devserver running everything rebuilds not just this file. Doing it this way the initial build is same time and the second build after update is around 200ms faster but still no where near the performance of working with libsass.

What do I have to do so that I can edit main.css and just that part will build and build quick?

I am not sure that this is helpful, but I had very slow compilation with tailwind too and what helped is to remove autoprefixer plugin from postcss. Maybe you could try to do something like that, gradually remove plugins which are not needed for development. — Danila
I figured out that if I split my webpack config into multiple configs then it will re-build each config separately so doing that fixed the speed issue as I could separate my custom css to its own config. Thanks for suggestion though — Guerrilla

coulix coulix · Accepted Answer · 2020-11-21T14:23:08

For Tailwind2 the split technique may not work anymore https://github.com/tailwindlabs/tailwindcss/issues/2544

Webpack dev server slow compile on css change with tailwind

1 Answers