fix(@tailwindcss/vite): include @variant in feature detection

[remorses]

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:

// 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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 658ecbb3-d2bb-4764-9736-12c49b750c40

📥 Commits

Reviewing files that changed from the base of the PR and between 71e9ea2 and f4b8a96.

📒 Files selected for processing (2)

• CHANGELOG.md
• packages/@tailwindcss-vite/src/index.ts

✅ Files skipped from review due to trivial changes (1)

• CHANGELOG.md

---

Walkthrough

The plugin's early-exit check in Root.generate was adjusted so the compiler features bitmask must include Variants in addition to AtApply, JsPluginCompat, ThemeFunction, and Utilities. Previously the method returned early unless only the prior four flags were present; after the change it will also accept the Variants flag and only returns false when Variants (or any required flag) is missing.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding Features.Variants to feature detection in the @tailwindcss/vite plugin to fix handling of @variant CSS files.
Description check	✅ Passed	The description clearly explains the issue, root cause, and solution, with before/after code and a reproduction link directly related to the changeset.
Linked Issues check	✅ Passed	The PR directly addresses issue #19964 by adding Features.Variants to the bitmask, which allows CSS files with only @variant directives to be properly processed by the Vite plugin.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective: modifying the feature detection bitmask in the Vite plugin and updating the changelog accordingly.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/@tailwindcss-vite/src/index.ts (1)

523-530: LGTM — correct fix for the feature-detection gap.

Adding Features.Variants to the bitmask ensures CSS files that only contain @variant/@custom-variant (without @apply, theme(), or utilities) are no longer early-returned as non-Tailwind files and will be compiled properly. The downstream Features.Utilities-gated scanning/dependency-registration blocks (lines 532-582) are unaffected, which is correct since variant-only files don't need candidate scanning.

One optional consideration: it would be worth adding a regression test (e.g., in the Vite plugin integration tests) with a CSS entry that only declares @custom-variant/@variant to lock in this behavior and prevent future regressions.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/`@tailwindcss-vite/src/index.ts around lines 523 - 530, The
early-return conditional is missing Features.Variants so files that only declare
`@variant/`@custom-variant get treated as non-Tailwind; update the bitmask check
on this.compiler.features to include Features.Variants alongside
Features.AtApply, Features.JsPluginCompat, Features.ThemeFunction,
Features.Utilities so the if-statement correctly detects variant-only CSS and
does not return false; locate the check using the this.compiler.features
expression and the Features enum in index.ts and add Features.Variants to the
ORed mask.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/`@tailwindcss-vite/src/index.ts:
- Around line 523-530: The early-return conditional is missing Features.Variants
so files that only declare `@variant/`@custom-variant get treated as non-Tailwind;
update the bitmask check on this.compiler.features to include Features.Variants
alongside Features.AtApply, Features.JsPluginCompat, Features.ThemeFunction,
Features.Utilities so the if-statement correctly detects variant-only CSS and
does not return false; locate the check using the this.compiler.features
expression and the Features enum in index.ts and add Features.Variants to the
ORed mask.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 4bf147ce-19b1-4407-a0e7-694e971a8685

📥 Commits

Reviewing files that changed from the base of the PR and between f62597a and 437ef3c.

📒 Files selected for processing (1)

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

[RobinMalfait]

Thanks!

This makes sense. Note that we will use the default dark variant implementation not the custom one since you didn't reference the other file.

That said, we already had this behavior if you only used @apply flex; for example (since it's a built-in utility).