[v4] Support TypeScript Aliases for @import and @reference in Tailwind CSS

[T-hash06]

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?
Vite 5.4.14 + vite-tsconfig-paths 5.1.4

What version of Node.js are you using?
v23.9

What browser are you using?
N/A

What operating system are you using?
Linux

Reproduction URL
Not necessary for this feature request.

Describe your issue

Currently, Tailwind CSS does not support TypeScript path aliases (from tsconfig.json) when using @import or @reference directives in stylesheets. This limitation forces developers to use cumbersome relative paths, especially in large projects.

Current Behavior (Without Aliases)

@reference "../../../tailwind.css";
@import "../../styles/theme.css";

Proposed Behavior (With Aliases)

@reference "@/tailwind.css";
@import "@/styles/theme.css";

Benefits

• Improves code readability and maintainability.
• Reduces the complexity of navigating deep folder structures.
• Aligns with best practices for modern TypeScript-based projects.

Possible Implementation

• Parse tsconfig.json or jsconfig.json for the paths property and resolve the alias mappings accordingly.
• Hook into PostCSS or Tailwind’s preprocessing pipeline to resolve aliases before processing stylesheets.

Would love to hear thoughts from the Tailwind team and community on this! 🚀

[wongjn]

If it helps at all, you could use subpath imports, like:

// package.json
"imports": {
  "#tailwind.css": "path/to/tailwind.css",
  "#theme.css": "path/to/styles/theme.css"
}

@import "#tailwind.css";
@import "#theme.css";

[T-hash06]

I really appreciate your response! Your explanation about using subpath imports was exactly what I needed. It definitely helps simplify the setup, and I hadn't considered that approach before.

Thanks again for taking the time to share your knowledge 🎉 👍