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`.