Tailwind styles not reloading-CodePudding

*Edit: I just checked the webpack output, and it is emitting a different index.html when I save. Added the output to the question below

*Edit2: It's not to do with dev server, it's a config option in tailwind.config.js. See answer below :)

Am new to using Tailwind and am struggling to set it up with Webpack (specifically HtmlWebpackPlugin and webpack-dev-server).

I can't seem to get it to watch the html for class changes, and I figured that might be to do with the tailwing config content property pointing to the wrong path, but I'm not sure what it should be?

My webpack config devServer object points to static resources in 'dist', but that results in no styling at all, and pointing it at src/index.html (which HtmlWebpackPlugin uses as a template) doesnt' refresh the styles when there are changes.

It's probably a very simple mistake, but any ideas where I'm going wrong?

File structure

Webpack.config.js

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

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name]bundle.js',
        clean: true,
    },
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist'),
        },
        port: 5000,
        open: true,
        hot: true,
        compress: true,
        historyApiFallback: true,
    },
    module: {
        rules: [{
                test: /\.js$/i,
                include: path.resolve(__dirname, 'src'),
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            {
                test: /\.css$/i,
                include: path.resolve(__dirname, 'src'),
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },

        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
        }),
    ],
}

Tailwind.config.js

module.exports = {
    content: ['./src/*.html'], // doesn't reload on changes
    //content: ['./dist/*.html] // no styling at all
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

Package.json

{
    "name": "tailwind-webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "webpack serve",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.17.9",
        "@babel/preset-env": "^7.16.11",
        "babel-loader": "^8.2.5",
        "css-loader": "^6.7.1",
        "html-loader": "^4.1.0",
        "html-webpack-plugin": "^5.5.0",
        "postcss": "^8.4.16",
        "postcss-loader": "^6.2.1",
        "postcss-preset-env": "^7.7.2",
        "style-loader": "^3.3.1",
        "tailwindcss": "^3.1.8",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.9.3"
    }
}

src/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Email Subscribe</title>
    </head>
    <body>
        <!-- Background Container-->
        <div >
            <!-- Card -->
            <div >
                <!-- Flex Container -->
                <div >
                    <!-- Image -->
                    <img src="./images/image.jpg" 
                         alt="" 
                         >
                </div>
            </div>
        </div>
    </body>
</html>

webpack output

assets by status 72.8 KiB [cached] 1 asset
assets by path *.js 131 KiB
  asset mainbundle.js 131 KiB [emitted] [minimized] (name: main) 1 related asset
  asset 179.4bdb2b52a0f30be06877.hot-update.js 105 bytes [emitted] [immutable] [hmr] [minimized] (name: main)
asset index.html 589 bytes [emitted]
asset main.4bdb2b52a0f30be06877.hot-update.json 25 bytes [emitted] [immutable] [hmr]
Entrypoint main 131 KiB = mainbundle.js 131 KiB 179.4bdb2b52a0f30be06877.hot-update.js 105 bytes
runtime modules 27.3 KiB 13 modules
orphan modules 18.8 KiB [orphan] 8 modules
cacheable modules 180 KiB
  modules by path ./node_modules/ 166 KiB
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
    modules by path ./node_modules/webpack-dev-server/client/ 53.5 KiB 4 modules
    modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
    modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB 2 modules
    ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
    ./node_modules/events/events.js 14.5 KiB [built] [code generated]
  modules by path ./src/ 14.6 KiB
    ./src/index.js 47 bytes [built] [code generated]
    ./src/style.css 2.37 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./src/style.css 12.2 KiB [built] [code generated]
webpack 5.74.0 compiled successfully in 2135 ms

CodePudding user response：

So I discovered the answer in a starter video

in your tailwind.config.js file you need to add the purge option

/** @type {import('tailwindcss').Config} */
module.exports = {
  jit: true,
  purge: ["./src/**/*.html", "./src/**/*.{js, jsx, ts, tsx}"],
  content: [],
  theme: {
    extend: {},
  },
  variant: {
    extend: {}
  }
  plugins: [],
}

Worked for me, hope it helps someone else

Good description here