Add classes output switch to Tailwind CLI

Introduce a new switch `--classes-output` to the Tailwind CLI build command to output only detected classes.

* **src/cli/index.js**
  - Add a new switch `--classes-output` to the build command.
* **src/lib/expandTailwindAtRules.js**
  - Update the `expandTailwindAtRules` function to handle the `--classes-output` switch.
  - Add logic to output only the detected classes when the switch is enabled.
* **tests/variants.test.js**
  - Add tests to verify the functionality of the `--classes-output` switch.
  - Include test cases for different scenarios with the new switch.

src/cli/index.js

@@ -44,6 +44,7 @@ let commands = {
     args: {
       '--input': { type: String, description: 'Input file' },
       '--output': { type: String, description: 'Output file' },
+      '--classes-output': { type: String, description: 'Output file for detected classes' },
       '--watch': {
         type: oneOf(String, Boolean),
         description: 'Watch for changes and rebuild as needed',

src/lib/expandTailwindAtRules.js

@@ -278,5 +278,12 @@ export default function expandTailwindAtRules(context) {
         rule.remove()
       }
     })
+
+    // Handle the --classes-output switch
+    if (context.tailwindConfig.cli?.classesOutput) {
+      const classesOutputPath = context.tailwindConfig.cli.classesOutput
+      const detectedClasses = Array.from(candidates).join('\n')
+      await fs.promises.writeFile(classesOutputPath, detectedClasses, 'utf8')
+    }
   }
 }

tests/variants.test.js

@@ -1226,3 +1226,55 @@ test('* is matched by the parser as the children variant', async () => {
     }
   `)
 })
+
+test('CLI --classes-output switch', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="bg-red-500 text-center"></div>`,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  let result = await run(input, config, { '--classes-output': 'detected-classes.txt' })
+
+  expect(result.css).toMatchFormattedCss(css`
+    .bg-red-500 {
+      --tw-bg-opacity: 1;
+      background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+    }
+    .text-center {
+      text-align: center;
+    }
+  `)
+
+  const detectedClasses = fs.readFileSync('detected-classes.txt', 'utf8')
+  expect(detectedClasses).toBe('bg-red-500\ntext-center\n')
+})
+
+test('CLI --classes-output switch with no detected classes', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="non-existent-class"></div>`,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  let result = await run(input, config, { '--classes-output': 'detected-classes.txt' })
+
+  expect(result.css).toBe('')
+
+  const detectedClasses = fs.readFileSync('detected-classes.txt', 'utf8')
+  expect(detectedClasses).toBe('')
+})