What version of Tailwind CSS are you using?

v4.2.2

What build tool (or framework if it abstracts the build tool) are you using?

Vite 8.0.8 with @tailwindcss/vite

What version of Node.js are you using?

v24.14.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/remorses/tailwind-variant-bug

Describe your issue

A CSS file that only uses @variant (no @apply, theme(), or utility classes) is silently skipped by @tailwindcss/vite. The @variant directive is passed through raw to the browser, which drops it as an unknown at-rule.

Reproduction — two CSS files in a Vite project:

/* main.css — Tailwind entry */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

/* overrides.css — imported via JS: import './overrides.css' */
:root {
  @variant dark {
    --background: var(--color-neutral-950);
  }
}

overrides.css is never processed by Tailwind. The @variant dark rule is served raw to the browser and silently discarded. Adding @apply hidden to a dummy class in the same file makes Tailwind process it and @variant starts working.

Root cause — the feature detection check in @tailwindcss/vite (line 475-481):

if (
  !(
    this.compiler.features &
    (Features.AtApply | Features.JsPluginCompat | Features.ThemeFunction | Features.Utilities)
  )
) {
  return false
}

This check doesn't include @variant (or @custom-variant). If a CSS file only uses these directives, generate() returns false and the file is treated as plain CSS.

Expected behavior — @variant should be recognized as a Tailwind feature so the file gets processed.