Order of CSS selectors is inconsistent each time the same build is run with Vite

[joelvh]

What version of Tailwind CSS are you using?

tailwindcss v3.2.4

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

vite v4.0.3

What version of Node.js are you using?

node v16.18.1

What browser are you using?

Chrome

What operating system are you using?

macOs

Reproduction URL

CSS from server 1: https://play.tailwindcss.com/FhK4daTQLG?file=css
CSS from server 2: https://play.tailwindcss.com/eWyyqC64HS?file=css

Config file: https://play.tailwindcss.com/7WmGQKPdBk?file=config

Describe your issue

Tailwind is outputting CSS with selectors in a different order each time a build runs. This is prevalent when deploying to multiple servers. The same release will result in differing CSS build artifacts.

We experience this from time to time with a 404 error in the browser because the CSS filename on each server has a different hash. The HTML page is served from one server and then the CSS file is served by another server where the filename doesn't match.

I've provided a copy of the output of two servers where you can see the order in which CSS selectors is different. Config is also provided.

I want to say that this started with the move to Vite from Webpack.

Has anyone else experienced this?

[adamwathan]

Hey! Pushed a tweak that should fix this for you here: #10382

Will be in the next release but you can try it now by installing our insiders build:

npm install -D tailwindcss@insiders

[joelvh]

@adamwathan thanks for such a quick response! Much appreciated. Will give this a spin.

[terryupton]

@adamwathan - I can confirm this fix also works.
I was having an issue with the order for grid cols breakpoint order is wrong. sm: is overwriting lg: and xl: when using Vite 4 to build.

When do you intend to release this fix?