[v4] vite build --watch only compile html classes right on the init run

[KartoffelToby]

What version of Tailwind CSS are you using?

v4

What build tool (or framework if it abstracts the build tool) are you using?

Plain vite Projekt with css/html Input files in rollup config

What version of Node.js are you using?

v20.11.0

What browser are you using?

Chrome

What operating system are you using?

Linux Debian

Describe your issue

I have some css files ans HTML files. The HTML contains some tailwindcss classes like p-2 etc. If i run vite build --watch the first build is correct. And the p-2 css Definition is in the Output css. But if i change the classes in the HTML it recompiles but dont get the new classes. If i use @apply in my source css file the Compiler works every time. So must be a bug in the HTML stuff.

[Massa-Albani4]

try adding purge: ["./src/**/*.{html,js}"], in the tailwind config file

[KartoffelToby]

@Massa-Albani4 Its the vite Plugin from v4 no tailwindcss config anymore

[philipp-spiess]

@KartoffelToby Heya! Do you have a repro that you can share? We've been looking into the Vite plugin just last week and as a result of that also added a new integration test that does cover changing a .html file in watch mode if you need a starting point.

[muhharuntahir]

1. Check Vite Configuration: Ensure that your Vite configuration is set up correctly to watch for changes in HTML files. Your vite.config.js should include the HTML files in the build.rollupOptions.input configuration.

import { defineConfig } from "vite"
import path from "path"

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, "index.html"),
        // Add other HTML entry points here
      }
    }
  }
})

/ / 2. Tailwind CSS Configuration: Make sure your tailwind.config.js is correctly configured to purge unused styles from the correct files. For example:

module.exports = {
  content: [
    "/index.html",
    "./src/**/*.{js,ts,jsx,tsx,html}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

/ /

3. Update Dependencies: Ensure all dependencies are up-to-date, including Vite and Tailwind CSS. Run: npm update