-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
Description
What version of Tailwind CSS are you using?
v4.2.1
What build tool (or framework if it abstracts the build tool) are you using?
Vite 8.0.0
What version of Node.js are you using?
v25.7.0
What browser are you using?
Firefox Developer Edition 149.0b8
What operating system are you using?
Linux (Arch Linux 6.19.6)
Reproduction URL
Describe your issue
CSS @import statements using tsconfig path aliases fail to resolve when using @tailwindcss/vite with Vite's resolve.tsconfigPaths: true.
Given a tsconfig with "@themes/*": ["./src/themes/*"] and a CSS file containing @import "@themes/custom.css", the dev server errors with:
Can't resolve '@themes/custom.css' in '/path/to/src'
Plugin: @tailwindcss/vite:generate:serve
Adding an explicit resolve.alias entry for the same path works as a workaround, which points to the root cause:
In @tailwindcss-vite/src/index.ts, the CSS and JS resolvers pass aliasOnly: true when calling Vite's resolver:
// Pre-environment API
customCssResolver = (id: string, base: string) => cssResolver(id, base, true, isSSR)
// Environment API
customCssResolver = (id: string, base: string) => cssResolver(env, id, base, true)When aliasOnly is true, Vite's createIdResolver only runs the @rollup/plugin-alias plugin and skips the oxc resolver entirely — which is responsible for tsconfig path resolution. This is why resolve.alias works but resolve.tsconfigPaths does not.
For reference, Vite's own CSS @import resolver (css.ts) calls with aliasOnly omitted (defaulting to false), getting full resolution including tsconfig paths. The only internal use of aliasOnly: true in Vite is in the dep optimizer to check if an ID is aliased to an entry point.
Changing true to false for the aliasOnly parameter should fix this while preserving resolve.alias support (the alias plugin always runs first in the full resolution pipeline).