Compatibility issue with hardcoded styles.

[Henrique0305]

There's a breaking change related to the new Tailwind V4 and custom font sizes. The issue is: adding a custom font size for example: text-[12px] , is converted to font-size: 12px !important, but when we add the lg: prefix, it does not add the !important to it's CSS compilation, it causes the lg: modificator to not work.

What version of Tailwind CSS are you using?

For example: v4.0.12

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

postcss-cli 11.0.0, Next.js 15.1.7

What version of Node.js are you using?

Node: 20.18.3

[philipp-spiess]

Hey! So the !important modifier is only added if the string before or after the class name is an exclamation mark: !text-[12px] or text-[12px]! (the latter is for backward compatibility only). It shouldn't add this in all situations. Do you mind sharing a reproduction of your issue so we can figure out why that's happening?