Ensure we process Tailwind CSS features when using @reference

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
+- Ensure we process Tailwind CSS features when only using `@reference` or `@variant` ([#16057](https://github.com/tailwindlabs/tailwindcss/pull/16057))
 
 ## [4.0.1] - 2025-01-29
 

packages/@tailwindcss-postcss/src/index.test.ts

@@ -248,6 +248,56 @@ test('bail early when Tailwind is not used', async () => {
   `)
 })
 
+test('handle CSS when only using a `@reference` (we should not bail early)', async () => {
+  let processor = postcss([
+    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
+  ])
+
+  let result = await processor.process(
+    css`
+      @reference "tailwindcss/theme.css";
+
+      .foo {
+        @variant md {
+          bar: baz;
+        }
+      }
+    `,
+    { from: inputCssFilePath() },
+  )
+
+  expect(result.css.trim()).toMatchInlineSnapshot(`
+    "@media (width >= 48rem) {
+      .foo {
+        bar: baz;
+      }
+    }"
+  `)
+})
+
+test('handle CSS when using a `@variant` using variants that do not rely on the `@theme`', async () => {
+  let processor = postcss([
+    tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }),
+  ])
+
+  let result = await processor.process(
+    css`
+      .foo {
+        @variant data-is-hoverable {
+          bar: baz;
+        }
+      }
+    `,
+    { from: inputCssFilePath() },
+  )
+
+  expect(result.css.trim()).toMatchInlineSnapshot(`
+    ".foo[data-is-hoverable] {
+      bar: baz;
+    }"
+  `)
+})
+
 test('runs `Once` plugins in the right order', async () => {
   let before = ''
   let after = ''

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

@@ -77,7 +77,9 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin {
             root.walkAtRules((node) => {
               if (
                 node.name === 'import' ||
+                node.name === 'reference' ||
                 node.name === 'theme' ||
+                node.name === 'variant' ||
                 node.name === 'config' ||
                 node.name === 'plugin' ||
                 node.name === 'apply'