[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

[vnphanquang]

Hi all. Not sure in which version this was fixed but I'm still getting the issue in 4.0.14. You can inspect the output of this tailwind playground: https://play.tailwindcss.com/aUuZ88jBpV?size=540x720, which shows the same bug for both 4.0.14 and insiders (de145c5 as of this writing).

Thanks

[borama]

@vnphanquang I am not sure I follow: the playground seems to work correctly for me under 4.0.14 (see the slightly amended version here), besides, this issue was never about HTML but rather about Slim, specifically.

Also, a few days ago, I was able to confirm that in our Slim templates the new Tailwind versions recognize the 2xl variants properly. Thanks everyone!

[vnphanquang]

@borama hmmm thanks for the input. Apologies, false report on my part. It is indeed working as intended. The character escape threw me off and I didn't see the added space. Please ignore my previous message. Thanks again!