Order of CSS selectors is not correct with v3.2.x in specific scenarios

[rahulv3a]

What version of Tailwind CSS are you using?

v3.2.4

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

I use Vite. But I was able to reproduce the bug with npx tailwindcss -i ./src/style.css -o ./dist/style.css.

What version of Node.js are you using?

v16.16.0

What browser are you using?

Chrome

What operating system are you using?

Windows 10

Reproduction URL

https://replit.com/@rahulv3a/Tailwind-bug. Please click on Run to run the instance and Show files to view the code.

I couldn't replicate it on play.tailwindcss.com because the files are required to be in a specific folder structure to reproduce.

Describe your issue

I have a PHP project with hundreds of files. Markup of various components (like menus) is generated by a CMS. As adding classes is not an option, I need to use [&_] on the containers to style them. Some layouts break when I update from v3.1.x to v3.2.x because the CSS order of certain selectors in the CSS generated is wrong.

It occurs only when:

• [&_] classes are used with v3.2.x. Everything works flawlessly with v3.1.x.
• specific conditions are met. I'm still trying to figure them out. But I was able to create an isolated demo for you.

Example

In the following markup, the list items should be stacked in SM, and side-by-side from MD onwards. But they stay stacked in all viewports.

<div class="[&_ul]:flex [&_ul]:flex-col md:[&_ul]:flex-row">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Generated CSS:

@media (min-width: 768px) {
  .md\:\[\&_ul\]\:flex-row ul {
    flex-direction: row;
  }
}

.\[\&_ul\]\:flex ul {
  display: flex;
}

.\[\&_ul\]\:flex-col ul {
  flex-direction: column;
}

Expected CSS:

.\[\&_ul\]\:flex ul {
  display: flex;
}

.\[\&_ul\]\:flex-col ul {
  flex-direction: column;
}

@media (min-width: 768px) {
  .md\:\[\&_ul\]\:flex-row ul {
    flex-direction: row;
  }
}

Demo

I created an online demo https://replit.com/@rahulv3a/Tailwind-bug of the example mentioned above. It contains only the code required to reproduce the bug. Please click on Run to run the instance and Show files to view the code.

• Tailwind setup

  • v3.2.4 is being used.
  • yarn tailwindcss -i ./src/style.css -o ./dist/style.css is used to generate the CSS.
  • preflight is disabled to keep things simple.

• Conditions

  • tailwind.config.js
    • content has ["./inc/**/*.php", "./templates/**/*.php"].
    • The order of the paths is important to replicate the issue.
  • inc/functions.php
    • It contains two comments. In my project, ./inc contains hundreds of functions that are documented in detail. The comments contain words like contents, lowercase, etc. Tailwind creates classes for them which is fine. But for some reason unknown, the comments that start with // interfere with the order of CSS selectors.
  • template/01-required.php
    • I don't know why but this code is required to replicate the issue.
  • template/component.php
    • This file contains the actual code mentioned in the example above.

More examples
Here are some more examples of the bug I experience in my project with v3.2.x:

• <br> stays hidden in all viewports.

  <h1 class="[&amp;_br]:hidden [&amp;_br]:xl:block">
    Lorem<br />
    Ipsum
  </h1>

• <img> stays full width in all viewports.

  <figure class="[&_img]:w-full md:[&_img]:w-[300px] xl:[&_img]:w-[340px]">
    <img src="./image.jpg" alt="some image" />
  </figure>

I can create isolated demos for each of them if it helps you debug.

Please let me know if you need any other information.

[adamwathan]

Thanks for reporting, I was able to distill the reproduction down to this minimal demo on Tailwind Play:

https://play.tailwindcss.com/3ujiz5LanM

Can see the sorting issue in the "Generated CSS" tab. Will look at this one next week!

[thecrypticace]

Hey, thanks for the report! I've merged the fix for this in #10288. It'll be available in our next release.