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> |
||
|---|---|---|
| .. | ||
| @tailwindcss-browser | ||
| @tailwindcss-cli | ||
| @tailwindcss-node | ||
| @tailwindcss-postcss | ||
| @tailwindcss-standalone | ||
| @tailwindcss-upgrade | ||
| @tailwindcss-vite | ||
| internal-example-plugin | ||
| tailwindcss | ||
| tsconfig.base.json | ||