JIT doesn't add new classes

[gregorvoinov]

Hi, I have switched to Tailwind css 2.1 but now when I use a utility class for the first time it is not added as if the class does not exist. I need to restart the server that it gets added with a value.

I'm using vuejs 2.6. I have done a costume installation without vue-cli.

Below is my whole setup.

What I'm doing wrong or what is missing?

// tailwind.config
module.exports = {
  mode: 'jit',
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.js',
    './src/**/*.md',
    './index.html',
    './src/design-system/css/safelist.txt'
  ],
  theme: {
     ...
  }

//postcss.config
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

// dependecies
"@babel/cli": "^7.13.14",
"@babel/core": "^7.13.14",
"@babel/preset-env": "^7.13.12",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^8.1.1",
"css-loader": "^5.2.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"markdown-it-attrs": "^4.0.0",
"postcss": "^8.2.9",
"postcss-cli": "^8.3.1",
"postcss-import": "^14.0.1",
"postcss-loader": "^5.2.0",
"prismjs": "^1.23.0",
"style-loader": "^2.0.0",
"tailwindcss": "^2.1.1",
"url-loader": "^4.1.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-router": "^3.5.1",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.31.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
"frontmatter-markdown-loader": "^3.6.2",
"html-loader": "^2.1.2",
"raw-loader": "^4.0.2",
"vue-svg-loader": "^0.16.0"

//webpack

// webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const { HotModuleReplacementPlugin } = require('webpack')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")
const Mode = require('frontmatter-markdown-loader/mode')
const markdownIt = require('markdown-it')
const markdownItAttrs = require('markdown-it-attrs')

module.exports = (env, options) => {
  const isDevelopmentMode = ( options.mode === 'development' )
  const devtool = isDevelopmentMode
    ? 'eval-source-map'
    : 'nosources-source-map'

  return ({
    devtool,
    mode: 'development',
    entry: './src/index.js',
    output: {
      publicPath: "/",
      path: path.join(__dirname, './dist'),
      filename: 'index.js'
    },
    devServer: {
      contentBase: path.resolve(__dirname, './src'),
      historyApiFallback: true,
      hot: true,
      port: 3000,
      host: 'localhost',
      overlay: {
        warnings: true,
        errors: true,
      },
      open:true,
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.join(__dirname, 'src'),
        '@app': path.join(__dirname, 'src/app'),
        '@app_mixins': path.join(__dirname, 'src/app/mixins'),
        '@app_primitives': path.join(__dirname, 'src/app/primitives'),
        '@app_views': path.join(__dirname, 'src/app/views'),
        '@app_token': path.join(__dirname, 'src/app/tokens'),
        '@app_assets': path.join(__dirname, 'src/app/assets'),
        '@app_component': path.join(__dirname, 'src/app/components'),
        '@tokens': path.join(__dirname, 'src/design-system/tokens'),
        '@primitives': path.join(__dirname, 'src/design-system/primitives'),
        '@icons': path.join(__dirname, 'src/design-system/icons'),
        '@assets': path.join(__dirname, 'src/design-system/assets'),
        '@css': path.join(__dirname, 'src/design-system/css'),
        '@fonts': path.join(__dirname, 'src/design-system/fonts')
      },
      extensions: ['.js', '.vue', '.json', '.css', '.ttf', '.md', '.html', '.txt']
    },
    module: {
      rules: [
        {
          test: /\.svg$/,
          oneOf: [
            {
              resourceQuery: /external/,
              loader: 'file-loader',
              options: {
                name: '[name].[contenthash].[ext]',
                esModule: false,
                outputPath: 'assets/img'
              }
            },
            {
              // inline 
              loader: 'html-loader',
              options: {
                minimize: true,
                esModule: false
              }
            }
          ]
        },
        {
          test: /\.vue$/i,
          use: [
            {
              loader: "vue-loader",
            }
          ]
        },
        {  
          test: /\.js$/i,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        {
          test: /\.css$/i,
          use: [
            { loader: "style-loader" },
            { loader: 'css-loader' } ,
            { loader: "postcss-loader" }
            ],
        },
        {
          test: /\.(txt)$/i,
          loader: 'file-loader', 
          options: { 
            name: '[name].[contenthash].[ext]',
            esModule: false,
            outputPath: 'assets/static'
          } 
        },
        {
          test: /\.(png|jpg|gif)$/i,
          loader: 'file-loader',
          options: {
            name: '[name].[contenthash].[ext]',
            esModule: false,
            outputPath: 'assets/img'
          }
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          loader: 'file-loader',
          include: [
            path.resolve(__dirname, 'src/design-system/fonts'), 
            path.resolve(__dirname, 'src/app/assets/fonts')
          ],
          options: {
            name: '[name].[ext]',
            esModule: false,
            outputPath: 'assets/fonts/'
          },
        },
        {
          test: /\.md$/i,
          loader: 'frontmatter-markdown-loader',
          
          options: {
            include: path.resolve(__dirname, 'src/design-system'),
            mode: [Mode.VUE_COMPONENT],
            markdownIt: markdownIt({ html: true }).use(markdownItAttrs),
            vue: {
              root: 'markdown'
            }
          }
        }
      ]
    },
    plugins: [
      new CopyPlugin({
        patterns: [{ 
          from: path.resolve(__dirname, "src/app/static/**/*"),
          to: "[name][ext]",
        }],
      }),
      new CleanWebpackPlugin(),
      new VueLoaderPlugin(),
      new HTMLWebpackPlugin({
        filename: 'index.html',
        template: 'index.html'
      }),
      new HotModuleReplacementPlugin(),
    ]
  })
  
}

// text-6xl doesn't exist, heading stays small
<h1 class="text-6xl">heading</h1>
// restart server
// wohoo heading gets big
<h1 class="text-6xl">heading</h1>

[gregorvoinov]

Only thing I havn't posted was the scripts section and there was the problem.

If I'm adding NODE_ENV=production to my start script it reloads the page automatic and new classes are inserted

"start": "NODE_ENV=production webpack serve",

But if I'm adding NODE_ENV=development I have to reload it myself for new classes to appear in the DOM
also tried

"start": "TAILWIND_MODE=watch NODE_ENV=development webpack serve",

but the same need to reload manually

What I have to do, that just the classes get changed without reloading the page, if I'm using NODE_ENV=development?