tailwindcss: Tailwind not work as exepted with Webpack with JIT

What version of Tailwind CSS are you using?

2.1.1

What version of Node.js are you using?

14

What browser are you using?

Chrome

What operating system are you using?

Mac os

Reproduction repository

https://github.com/jbty/html-starter-typscript-scss-tailwind

The tailwind classes which are already in my html are working but I cannot add new ones.

I don’t understand where this came from. If I desete JIT everythings work as exepted but hot reload with webpack dev server is so long.

Tailwind config:

const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',

  purge: ['./dist/*.html', './dist/*.js'],

  darkMode: false,

  theme: {
    screens: {
      print: { raw: 'print' },
      sm: '640px',
      // => @media (min-width: 640px) { ... }
      md: '768px',
      // => @media (min-width: 768px) { ... }
      lg: '1024px',
      // => @media (min-width: 1024px) { ... }
      xl: '1280px',
      // => @media (min-width: 1280px) { ... }
      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },

    extend: {
      fontFamily: {},
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: colors.black,
        white: colors.white,
        gray: colors.trueGray,
        indigo: colors.indigo,
        red: colors.rose,
        yellow: colors.amber,
      },
      fontSize: {},
    },
  },

  variants: {
    extend: {},
  },

  plugins: [],
};

Postcss config:

module.exports = {
  plugins: [require('autoprefixer'), require('@tailwindcss/jit')],
};

Webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/app.ts',
  target: 'web',
  cache: true,

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[fullhash:8].js',
    sourceMapFilename: '[name].[fullhash:8].map',
    chunkFilename: '[id].[fullhash:8].js',
    clean: true,
  },

  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
          },
          'sass-loader',
        ],
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext]',
          outputPath: 'assets/images',
          esModule: false,
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        loader: 'file-loader',
        options: {
          outputPath: 'assets/fonts',
        },
      },
    ],
  },

  resolve: {
    extensions: ['.ts', '.js'],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      title: 'Webpack Starter',
      description: 'Webpack Starter',
    }),
    new CopyPlugin({
      patterns: [{ from: 'src/public' }],
    }),
  ],

 devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    watchContentBase: true,
    writeToDisk: true,
    hot: true,
  },
};