after updating Tailwind => random strings in the postcss file causing styles to break

[ohabash]

What version of Tailwind CSS are you using?
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/line-clamp": "^0.3.1",
"@tailwindcss/typography": "^0.5.1",

What build tool (or framework if it abstracts the build tool) are you using?
"postcss": "^7.4.5",
"postcss-import": "^14.0.2",
"postcss-preset-env": "^6.7.0",
"postcss-url": "^10.1.1",

What version of Node.js are you using?
v14.16.0

The Issue

When build happens; all the scss is minified with postcss. In the minified file the style are all working until you get to @import 'tailwindcss/utilities'; then all styles are broken (not readable in any browser).

When i prettified the postcss styles i could see some extra code that is causing the problem.

this is not css so why is it in the postcss file?

.\[k\:string\] {
	k: string
}

.\[https\:\/\/en\.wikipedia\.org\/wiki\/Uname\#Examples\] {
	https:

Does anyone know where this is coming from? It looks like a TS interface or json of some sort

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This is a side effect of arbitrary properties.
It just happens to be that you have some code that looks like [key:value] or in your case [https://en.wikipedia.org/wiki/...].

We do have some code that makes sure it is parsable css, but this has some bugs. I'll create a quick fix right right now.

[RobinMalfait]

This should be fixed by a quick fix in #7252, and will be available in the next release (being published right now).

You can already try it by using the insiders build npm install tailwindcss@insiders or yarn add tailwindcss@insiders.

[ohabash]

that worked. We are thankful for your quick response. 🙏