Skip to content

Commit db27049

Browse files
fix(@tailwindcss/vite): include @variant in feature detection (#19966)
Fixes #19964 CSS files imported via JS that only use `@variant` (no `@apply`, `theme()`, or utility classes) are silently skipped by the Vite plugin. The `@variant` directive gets passed through raw to the browser, which drops it as an unknown at-rule. **Root cause** — `Features.Variants` is missing from the [feature detection bitmask](https://github.com/tailwindlabs/tailwindcss/blob/v4.2.4/packages/%40tailwindcss-vite/src/index.ts#L526): ```ts // before Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities // after Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities | Features.Variants ``` **Reproduction** — https://github.com/remorses/tailwind-variant-bug --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
1 parent 5a79990 commit db27049

2 files changed

Lines changed: 6 additions & 1 deletion

File tree

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515

1616
- Ensure `@plugin` resolves package JavaScript entries instead of browser CSS entries when using `@tailwindcss/vite` ([#19949](https://github.com/tailwindlabs/tailwindcss/pull/19949))
1717
- Fix relative `@import` and `@plugin` paths resolving from the wrong directory when using `@tailwindcss/vite` ([#19965](https://github.com/tailwindlabs/tailwindcss/pull/19965))
18+
- Ensure CSS files containing `@variant` are processed by `@tailwindcss/vite` ([#19966](https://github.com/tailwindlabs/tailwindcss/pull/19966))
1819

1920
## [4.2.4] - 2026-04-21
2021

packages/@tailwindcss-vite/src/index.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -537,7 +537,11 @@ class Root {
537537
if (
538538
!(
539539
this.compiler.features &
540-
(Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities)
540+
(Features.AtApply |
541+
Features.JsPluginCompat |
542+
Features.ThemeFunction |
543+
Features.Utilities |
544+
Features.Variants)
541545
)
542546
) {
543547
return false

0 commit comments

Comments
 (0)