Circular dependency because of index.css

[Nefcanto]

What version of Tailwind CSS are you using?

v4.1.3

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

Vite 6.2.6

What version of Node.js are you using?

v22.14.0

What browser are you using?

Chrome

What operating system are you using?

Debian GNU/Linux 12 (bookworm)

Reproduction URL

https://github.com/Nefcanto/TailwindCyclic

Describe your issue

When I save my main.jsx in my Vite + React + Tailwind project, I see this warning:

vite:hmr circular imports detected: /src/main.jsx -> /src/index.css -> /src/main.jsx

The index.css should not cause cyclic dependency.

[philipp-spiess]

@Nefcanto Hey! I'm curious if you have any runtime issues as well or if it's only the warning? The warning itself makes sense—index.css will read utility classes used in main.jsx but it itself has a reference to index.css, hmm. This will need some thinking!

[Nefcanto]

@philipp-spiess thank you for answering. The problem is that HMR gets invalidated anytime we save main.jsx, and we see a full reload, diminishing the DX.

The flow you mentioned (index.css reading the utility classes in the main.jsx) is not a direct dependency. Does it really count as a circular dependency?

[philipp-spiess]

@Nefcanto I see, does this happens only if you update the main.jsx file or also if you update other files?

[…] is not a direct dependency. Does it really count as a circular dependency?

Yeah, I also find this confusing. What we do is use the Vite API addWatchFile(…) that will transform main.jsx as a watched-dependency of index.css. Will need to look more into it.

[Nefcanto]

@philipp-spiess it only happens for main.jsx.

[dvd-b]

How about setting up an alias in your Vite config to break the circular dependency? Try modifying your vite.config.js:

export default defineConfig(({ mode }) => {
    const aliases = {
        "Core": "src/Core/Exports",
        "Panel": "src/Panel/Exports",
        '@styles': '/src/index.css',
    }
    ...
})

and in your main.jsx : replace import "./index.css" by import "@styles"

[Nefcanto]

@dvd-b, I tried your approach. But it changed nothing.