Tailwind CSS with JIT not work with webpack

Question

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.

Version of Tailwind CSS: 2.1.1

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

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,
  },
};

Are you setting NODE_ENV to development? That controls whether Tailwind watches template files for changes. — Nathan Dawson
– Nathan Dawson, Commented Apr 7, 2021 at 13:54
@NathanDawson yes here => mode: 'development' in my webpack.dev.js — Jean-Baptiste THERY
– Jean-Baptiste THERY, Commented Apr 7, 2021 at 14:03
mode: 'development' alone isn't sufficient, make sure process.env.NODE_ENV === "development" — Pier-Luc Gendreau
– Pier-Luc Gendreau, Commented May 12, 2021 at 14:53

Levminer · Accepted Answer · 2021-06-14 13:08:10Z

3

This was my problem too. Add this before you webpack dev server command in your package.json:

"scripts": {
    "server": "webpack serve"
},

Change this to:

"scripts": {
    "server": "NODE_ENV=development webpack serve"
},

If you are on Windows I recommend installing this package:

npm install -D win-node-env

answered Jun 14, 2021 at 13:08

Levminer

612 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind CSS with JIT not work with webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related