[v4.1.12] Content scanning fails to detect utility classes in HTML files

[nasrelasri]

What version of Tailwind CSS are you using?

v4.1.12

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

@tailwindcss/cli 4.1.12

What version of Node.js are you using?

v20.18.0

What browser are you using?

N/A (CSS generation issue)

What operating system are you using?

macOS

Reproduction URL

https://github.com/nasrelasri/tailwind-v4-bug-reproduction

Describe your issue

Tailwind CSS v4.1.12 fails to generate utility classes for colors (bg-blue-*) and padding (p-4) while grid-related classes are generated correctly.

Steps to reproduce:

1. Install Tailwind CSS v4.1.12
2. Create HTML with mixed utility classes: grid grid-cols-3 gap-4 bg-blue-200 p-4
3. Run: npx @tailwindcss/cli -i input.css -o output.css
4. Check output.css

Expected behavior:
All utility classes should be generated in the output CSS.

Actual behavior:
Only grid classes (.grid, .grid-cols-3) are generated. Missing classes: .bg-blue-200, .bg-blue-300, .bg-blue-400, .p-4, .gap-4.

Workaround:
Downgrading to Tailwind CSS v3.4.17 generates all classes correctly with the same configuration.

[RobinMalfait]

Hey!

You are mixing Tailwind CSS v3 and Tailwind CSS v4 here (I would recommend to look at https://tailwindcss.com/docs/upgrade-guide when upgrading a project, or follow the install steps here: https://tailwindcss.com/docs/installation/tailwind-cli)

Essentially the input.css file uses Tailwind CSS v3 syntax, if you apply this diff it should start working:

- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

Once you do that, the output.css file will contain:

@layer utilities {
  .grid {
    display: grid;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .bg-blue-200 {
    background-color: var(--color-blue-200);
  }
  .bg-blue-300 {
    background-color: var(--color-blue-300);
  }
  .bg-blue-400 {
    background-color: var(--color-blue-400);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
}

[nasrelasri]

Hey! It works perfectly, thanks a lot!