[v4] Slim template regression - 2xl variant classes not extracted

[borama]

There is a regression in v4 in Slim templates - the 2xl variant classes are not extracted from source files.

What version of Tailwind CSS are you using?

4.0.8

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

tailwindcss CLI

What version of Node.js are you using?

n/a

What browser are you using?

n/a

What operating system are you using?

Linux

Reproduction URL

https://github.com/borama/tailwind4-slim-issue

Describe your issue

There is a regression similar to #14005 but present in Tailwind v4 (4.0.8). The 2xl: variant classes are not extracted from sources by the Tailwind CLI.

Sample project:

$ tree
.
├── sample.slim
├── tw3.config.js
├── tw3.css
└── tw4.css

$ head *
==> sample.slim <==
.bg-blue-100.2xl:bg-red-100
 ' Hi!

==> tw3.config.js <==
module.exports = {
  content: ["sample.slim"]
}

==> tw3.css <==
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

==> tw4.css <==
@import "tailwindcss" source(none);
@source "sample.slim";

1. This works OK in v3 (tailwindcss v3.4.17):

$ tailwindcss -i tw3.css -c tw3.config.js

...
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

@media (min-width: 1536px) {
  .\32xl\:bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
  }
}

2. The same Slim template does NOT work in v4:

$ tailwindcss -i tw4.css

...
@layer utilities;

≈ tailwindcss v4.0.8

Done in 20ms

I.e. not only it does not extract the 2xl:bg-red-100 class, it ignores all classes in the Slim template on the same line.

3. When the 2xl: class is the first on the line, it works again

Interestingly, when I swap the order of the classes, making the 2xl: class be the first on the line, it starts working:

$ cat sample.slim
.2xl:bg-red-100.bg-blue-100
 ' Hi!

$ tailwindcss -i tw4.css

...
@layer utilities {
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .\32 xl\:bg-red-100 {
    @media (width >= 96rem) {
      background-color: var(--color-red-100);
    }
  }
}

≈ tailwindcss v4.0.8

Done in 20ms

[philipp-spiess]

Hey! Thanks for the repro. We're working on some larger scale changes to our scanner logic and have made sure to include your test case there as well 👍 We'll update you when we we're closer to shipping these fixes.

[RobinMalfait]

Hey!

This should be fixed and will be available in the next release. You can already try it if you want using the insiders version:

• npm install tailwindcss@insiders @tailwindcss/cli@insiders
• npm install tailwindcss@insiders @tailwindcss/postcss@insiders
• npm install tailwindcss@insiders @tailwindcss/vite@insiders