mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
2030e942bc
Fixes #18400 In v3 when you used `important: true` it did not affect `@apply`. However, in v4 it does and there's no way to make it *not*. This is definitely a bug and would be unexpected for users coming from v3 who use `@apply` and `important` together. Basically, the following code, along with the detected utility `flex` in source files… ```css @import 'tailwindcss/utilities' important; .flex-explicitly-important { @apply flex!; } .flex-not-important { @apply flex; } ``` … would output this: ```css .flex { display: flex !important; } .flex-explicitly-important { display: flex !important; } .flex-not-important { display: flex !important; } ``` But it's expected that `@apply` doesn't consider the "global" important state. This PR addresss this problem and now the output is this: ```css .flex { display: flex !important; } .flex-explicitly-important { display: flex !important; } .flex-not-important { display: flex; /* this line changed */ } ``` If you want to mark a utility as important in `@apply` you can still use `!` after the utility to do so as shown above. --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>