Only expose used CSS variables

CHANGELOG.md

@@ -7,7 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Only expose used CSS variables ([#16211](https://github.com/tailwindlabs/tailwindcss/pull/16211))
+- Only expose used `@keyframes` ([#16211](https://github.com/tailwindlabs/tailwindcss/pull/16211))
 
 ## [4.0.4] - 2025-02-06
 

crates/oxide/src/parser.rs

@@ -340,13 +340,12 @@ impl<'a> Extractor<'a> {
             let start_brace_index = utility.find(b"[");
             let end_brace_index = utility.find(b"]");
 
-            match (start_brace_index, end_brace_index) {
-                (Some(start_brace_index), Some(end_brace_index)) => {
-                    if start_brace_index < index && end_brace_index > index {
-                        skip_parens_check = true;
-                    }
+            if let (Some(start_brace_index), Some(end_brace_index)) =
+                (start_brace_index, end_brace_index)
+            {
+                if start_brace_index < index && end_brace_index > index {
+                    skip_parens_check = true;
                 }
-                _ => {}
             }
 
             if !skip_parens_check && !utility[index + 1..].starts_with(b"--") {
@@ -1679,6 +1678,54 @@ mod test {
         );
     }
 
+    #[test]
+    fn test_find_css_variables() {
+        let candidates = run("var(--color-red-500)", false);
+        assert_eq!(candidates, vec!["var", "--color-red-500"]);
+
+        let candidates = run("<div style={{ 'color': 'var(--color-red-500)' }}/>", false);
+        assert_eq!(
+            candidates,
+            vec!["div", "style", "color", "var", "--color-red-500"]
+        );
+    }
+
+    #[test]
+    fn test_find_css_variables_with_fallback_values() {
+        let candidates = run("var(--color-red-500, red)", false);
+        assert_eq!(candidates, vec!["var", "--color-red-500", "red"]);
+
+        let candidates = run("var(--color-red-500,red)", false);
+        assert_eq!(candidates, vec!["var", "--color-red-500", "red"]);
+
+        let candidates = run(
+            "<div style={{ 'color': 'var(--color-red-500, red)' }}/>",
+            false,
+        );
+        assert_eq!(
+            candidates,
+            vec!["div", "style", "color", "var", "--color-red-500", "red"]
+        );
+
+        let candidates = run(
+            "<div style={{ 'color': 'var(--color-red-500,red)' }}/>",
+            false,
+        );
+        assert_eq!(
+            candidates,
+            vec!["div", "style", "color", "var", "--color-red-500", "red"]
+        );
+    }
+
+    #[test]
+    fn test_find_css_variables_with_fallback_css_variable_values() {
+        let candidates = run("var(--color-red-500, var(--color-blue-500))", false);
+        assert_eq!(
+            candidates,
+            vec!["var", "--color-red-500", "--color-blue-500"]
+        );
+    }
+
     #[test]
     fn test_is_valid_candidate_string() {
         assert_eq!(

integrations/cli/index.test.ts

@@ -1253,3 +1253,64 @@ test(
     `)
   },
 )
+
+test(
+  'emit CSS variables if used outside of utilities',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'src/index.css': css`
+        @import 'tailwindcss/utilities';
+        @theme {
+          --color-blue-500: blue;
+        }
+      `,
+      'src/index.ts': ts`
+        function MyComponent() {
+          return <motion.div />
+        }
+      `,
+    },
+  },
+  async ({ fs, spawn, expect }) => {
+    let process = await spawn(
+      'pnpm tailwindcss --input src/index.css --output dist/out.css --watch',
+    )
+    await process.onStderr((m) => m.includes('Done in'))
+
+    // No CSS variables are used, so nothing should be generated yet.
+    expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
+      "
+      --- ./dist/out.css ---
+      <EMPTY>
+      "
+    `)
+
+    // Use a CSS variable in JS/TS land, now it should be generated.
+    await fs.write(
+      './src/index.ts',
+      ts`
+        function MyComponent() {
+          return <motion.div animate={{ backgroundColor: 'var(--color-blue-500)' }} />
+        }
+      `,
+    )
+
+    fs.expectFileToContain(
+      './dist/out.css',
+      css`
+        :root,
+        :host {
+          --color-blue-500: blue;
+        }
+      `,
+    )
+  },
+)