[v4] @tailwindcss/postcss Fails to Generate Utility Classes for In-Memory Content

[HappyLDE]

[v4] @tailwindcss/postcss Fails to Generate Utility Classes for In-Memory Content

Describe the bug

When using @tailwindcss/postcss@4.1.11 with PostCSS to process in-memory content, Tailwind fails to generate utility classes (e.g., bg-blue-500). The output only contains the banner (/*! tailwindcss v4.x.x | MIT License | https://tailwindcss.com */). No errors or warnings are reported. File-based content scanning also fails with the same issue. This does not occur with Tailwind v3.4.14 in the same setup.

To Reproduce

1. Create test-in-memory.js:

   const postcss = require("postcss");
   const tailwindcss = require("@tailwindcss/postcss");
   
   const html = '<div class="bg-blue-500">Hello</div>';
   const config = {
     content: [{ raw: html }],
   };
   
   const cssInput = `
   @tailwind utilities;
   `;
   
   console.log("Input HTML:", html);
   console.log("Tailwind plugin loaded:", !!tailwindcss);
   console.log("Node.js version:", process.version);
   console.log("Processing with config:", JSON.stringify(config, null, 2));
   
   const processor = postcss([tailwindcss(config)]);
   console.log("PostCSS plugins:", processor.plugins.map(p => p.postcssPlugin));
   
   processor
     .process(cssInput, { from: undefined, to: undefined })
     .then((result) => {
       console.log("Generated CSS:", result.css);
       console.log("CSS length:", result.css.length);
       console.log("Warnings:", result.warnings().map(w => w.text));
       if (!result.css.includes("bg-blue-500")) {
         console.warn("Warning: Expected class (bg-blue-500) not found in output.");
       } else {
         console.log("Success: Expected class (bg-blue-500) found in output.");
       }
     })
     .catch((error) => {
       console.error("Error processing CSS:", error.message, error.stack);
     });

2. Install dependencies:

   npm install postcss@8.5.6 @tailwindcss/postcss@4.1.11 tailwindcss@4.1.11

3. Run:

   node test-in-memory.js

Expected behavior

Generated CSS should include:

.bg-blue-500 {
  background-color: #3b82f6;
}

Actual behavior

Generated CSS:

/*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */

• CSS length: 67
• Warnings: []

Environment

• Node.js: v22.12.0
• npm: v10.9.0
• OS: Linux 6.15.4-200.fc42.x86_64
• Dependencies:
  • postcss@8.5.6
  • @tailwindcss/postcss@4.0.7 (also tested with @tailwindcss/postcss@4.1.11)
  • @tailwindcss/node@4.0.7 (installed as a dependency)
  • tailwindcss@4.0.7 (installed as a dependency)

Additional context

• File-based content (e.g., content: ["./test.html"] with <div class="bg-blue-500">Hello</div>) produces the same result.
• The CLI (@tailwindcss/node@4.0.7 or @tailwindcss/node@4.1.11) fails due to a missing node_modules/.bin/tailwindcss binary.
• Tailwind v3.4.14 works correctly with both file-based and in-memory content in the same setup.
• PostCSS plugins reported: ['tailwindcss-postcss-fix-relative-paths', 'tailwindcss'].
• No errors or warnings are logged, suggesting a silent failure in content scanning.

Possible Cause

This may be related to compatibility issues with Node.js v22.12.0 or a bug in @tailwindcss/postcss@4.0.7 and @tailwindcss/postcss@4.1.11 for in-memory content scanning. The issue persists across minimal configurations, indicating a potential regression from v3.