resolve @import with path aliases

[stefanprobst]

What version of Tailwind CSS are you using?

v4.0.8

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

Next.js canary

What version of Node.js are you using?

v22.14.0

What browser are you using?

Firefox

What operating system are you using?

Linux

Reproduction URL

https://github.com/stefanprobst/issue-tailwindcss-import-path-alias/blob/main/app/globals.css

Describe your issue

tailwind does not resolve @import's which use path aliases. for example:

/* Module not found: Can't resolve '@/app/theme.css' error */
@import "@/app/theme.css";

/* Relative paths work fine. */
@import "./theme.css";

[philipp-spiess]

Hey! So we don't take your TypeScript configuration into account at the moment. In Vite setups this should work if if you have the vite-tsconfig-paths plugin but in Next.js it's better to not use aliases for now.

I converted this to a discussion for now since I can't make any guarantees wether we'll add this feature in the future.

[m3m0m2]

If the path alias is defined in vite.config.ts, this worked in tailwind version 3, but no longer works in tailwind version 4.
Adding vite-tsconfig-paths did not help me.
It appears that now tailwind tries to resolve a path alias as an absolute path without considering the current directory.