mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
d6c4e72351
This PR adds a new `@reference "…"` API as an replacement for the previously added [`@import "…" reference`](https://github.com/tailwindlabs/tailwindcss/pull/15228). The motivation for a distinct at rule is that `@import` is already handled outside of Tailwind in some scenarios (e.g. when using in combination with postcss-import, other pre-processors, or frameworks like Svelte). While our implementation of hijacking the `media` attribute _works in this cases_, it can cause annoying linter issues because tooling build around `@import` does not know about our behavior. To fix this, we've decided to move this mode into a separate at rule that is passed-through in the other tooling. Here's an example of how this would look like in Svelte: ```svelte <h1>Hello world!</h1> <style> @reference './theme.css'; h1 { color: var(--theme-color); } </style> ``` With this change, the Svelte linter would not be detecting unused CSS from the `theme.css` file as it would if we'd rely on `@import`.
A utility-first CSS framework for rapidly building custom user interfaces.
Documentation
For full documentation, visit tailwindcss.com.
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For chatting with others using the framework:
Join the Tailwind CSS Discord Server
Contributing
If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.