title: Tailwind CSS with JIT not work with webpack
body: <p>The Tailwind classes which are already in my HTML are working but I cannot add new ones.</p>
  <p>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.</p>
  <p><strong>Version of Tailwind CSS:</strong> 2.1.1</p>
  <p><strong>Reproduction repository:</strong>
  <a href="https://github.com/jbty/html-starter-typscript-scss-tailwind" rel="nofollow noreferrer">https://github.com/jbty/html-starter-typscript-scss-tailwind</a></p>
  <p><strong>Tailwind config:</strong></p>
  <pre class="lang-js prettyprint-override"><code>const colors = require('tailwindcss/colors');
  
  module.exports = {
    mode: 'jit',
  
    purge: ['./dist/*.html', './dist/*.js'],
  
    darkMode: false,
  
    theme: {
      screens: {
        print: { raw: 'print' },
        sm: '640px',
        // =&gt; @media (min-width: 640px) { ... }
        md: '768px',
        // =&gt; @media (min-width: 768px) { ... }
        lg: '1024px',
        // =&gt; @media (min-width: 1024px) { ... }
        xl: '1280px',
        // =&gt; @media (min-width: 1280px) { ... }
        '2xl': '1536px',
        // =&gt; @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: [],
  };
  </code></pre>
  <p><strong>PostCSS config:</strong></p>
  <pre><code>module.exports = {
    plugins: [require('autoprefixer'), require('@tailwindcss/jit')],
  };
  
  </code></pre>
  <p><strong>Webpack config:</strong></p>
  <pre class="lang-js prettyprint-override"><code>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,
    },
  };
  
  </code></pre>