[v4.0.17] Infinite rebuild loop with `vite build --watch`, fixed in v4.0.6

[Bagmaz]

What version of Tailwind CSS are you using?

v4.0.17 (bug appears)
v4.0.6 (works correctly)

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

Vite 6.2.3

What version of Node.js are you using?

v23.10.0

What version of npm are you using?

10.9.2

What browser are you using?

Chrome

What operating system are you using?

macOS

---

Describe the bug

After upgrading to Tailwind CSS v4.0.17, running the following command causes an infinite rebuild loop:

vite build --watch

Reproduction steps

1. Install [email protected] and @tailwindcss/[email protected]
2. Run vite build --watch
3. Notice the build restarts over and over
4. Downgrade Tailwind CSS to v4.0.6
5. The issue disappears — builds only trigger on file changes as expected

vite.config.js

import {defineConfig} from "vite";
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        tailwindcss()
    ],
    build: {
        outDir: "./assets",
        emptyOutDir: false,
        minify: false,
        rollupOptions: {
            input: {
                app: "./resources/js/app.js",
                styles: "./resources/css/app.css",
            },
            output: {
                dir: "./assets",
                entryFileNames: "[name].js",
                chunkFileNames: "[name].js",
                assetFileNames: "[name].css",
            },
        },
    },
});

package.json

{
  "name": "vite-tailwind-alpine",
  "version": "1.0.0",
  "description": "A custom Shopify theme built with Dawn",
  "type": "module",
  "scripts": {
    "dev": "run-p -sr shopify:dev watch",
    "shopify:dev": "shopify theme dev -s my-project",
    "build": "vite build --minify",
    "watch": "vite build --watch"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.0.6",
    "tailwindcss": "^4.0.6",
    "vite": "^6.2.3",
    "npm-run-all": "^4.1.5"
  },
  "dependencies": {
    "alpinejs": "^3.14.9",
    "gsap": "^3.12.7"
  }
}

[philipp-spiess]

Hey! Thanks, I was able to create a repro. The issue here is the name of the output directory (assets)—We have a heuristics to fix those for the default folder name (dist) but that heuristics does not apply in case of the renamed directory so it's considering it as a folder for your Tailwind source files.

The easiest way to fix this is to add assets to your .gitignore file as a workaround for now—or to change the source configuration to only look inside your source directories: https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path

Agree that this is somewhat unexpected though so I'll let this open while we figure out a way to guard against this!

Note for myself:

• Using insiders builds, @source not "…" also works around this issue
• This does require emptyOutDir to endless loop

[Kolterdyx]

Has this been solved? I'm getting the same issue on version 4.1.11, but I'm not sure if the cause is the same

[yalogica]

Have the same issue, I use cmd "dev": "vite build --watch", after that the vite infinity rebuilds the project if it contains "import './style.scss';"

package.json "@tailwindcss/vite": "^4.1.7", "tailwindcss": "^4.1.7",

P.S. I fixed it by commented the first line in my style.scss

// @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

P.P.S. Well, it's strange — infinity rebuilds are live again. But if I change styles.scss, it stops. So, my last fix is just a temporary solution.

P.P.P.S. I found out why it was happening. I was using an inline worker import like this:

import ConvertToThumbWorker from '@/workers/convert-to-thumb.ts?worker&inline';

I switched to the solution described here: https://gist.github.com/yalogica/db2ea97068c3476e4e81e47dbda4d7a9 After making this change, the infinite rebuilds stopped.

[4074]

@yalogica One of the solutions below works for me:

1. Remove the outDir option (the default is dist)
2. Add @source not "../build"; after the tailwind css imports

@import "tailwindcss";
@import "tw-animate-css";
@source not "../build";

[yalogica]

@yalogica One of the solutions below works for me:

• Remove the outDir option (the default is dist)
• Add @source not "../build"; after the tailwind css imports

Thx, but I found in my case why it was happening. I was using an inline worker import like this:

import ConvertToThumbWorker from '@/workers/convert-to-thumb.ts?worker&inline';

I switched to my own solution, which is described here: https://gist.github.com/yalogica/db2ea97068c3476e4e81e47dbda4d7a9 After making this change, the infinite rebuilds stopped.