What version of Tailwind CSS are you using?
v4.1.11
What build tool (or framework if it abstracts the build tool) are you using?
Angular and NX, however it can be repro'd in the playground
What version of Node.js are you using?
v24.2.0
What browser are you using?
Zen (runs on a Firefox base)
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/kM1swlss8C Minimal example, but shows the issue that padding utilities do not do anything anymore because the @apply is enforcing !important when it didn't use to in v3
Describe your issue
When importing tailwind and making use of important (i.e. @import "tailwindcss" important), v4 seems to automatically apply !important to any class that is created with @apply.
This did not happen in v3 which allowed me to decide whether I needed it or not when using @apply, and simultaneously ensuring that when a utility class is used in CSS (i.e. p-4) it overrode any CSS that came before it. This is especially important as I use Angular Material, which forces their styles into the <head> earlier than application styles causing them to always win in a priority competition, and this behaviour cannot be changed.
Important being forced on @apply rules messes with complex custom classes (if you've ever tried to customise the browser's built-in slider input, you'll understand my pain), wherein instead of having my class reference a CSS variable and have that variable have sensible defaults that can simply be overridden with an inline style, i.e.
// slider.css
// exerpt from a much large class that has to separately handle mozilla and webkit, because sliders SUCK
.slider {
// Mozilla track gradient (simulates a "filling" bar)
@apply [&::-moz-range-track]:bg-linear-to-r [&::-moz-range-track]:from-(--left-bar) [&::-moz-range-track]:via-(--right-bar) [&::-moz-range-track]:to-(--right-bar);
// Mozilla track value setter (allows 1 variable to control both pats of the fill)
@apply [&::-moz-range-track]:from-(percentage:--value) [&::-moz-range-track]:via-(percentage:--value) [&::-moz-range-track]:to-100%;
}// some-component.html
<input type="range" max="100" class="slider" [style.--value.%]="value" [value]="value" />
With v4 now I am forced to set the variable with !important in order to override the default value I have set at 50%
What version of Tailwind CSS are you using?
v4.1.11
What build tool (or framework if it abstracts the build tool) are you using?
Angular and NX, however it can be repro'd in the playground
What version of Node.js are you using?
v24.2.0
What browser are you using?
Zen (runs on a Firefox base)
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/kM1swlss8C Minimal example, but shows the issue that padding utilities do not do anything anymore because the
@applyis enforcing!importantwhen it didn't use to in v3Describe your issue
When importing tailwind and making use of important (i.e.
@import "tailwindcss" important), v4 seems to automatically apply!importantto any class that is created with@apply.This did not happen in v3 which allowed me to decide whether I needed it or not when using
@apply, and simultaneously ensuring that when a utility class is used in CSS (i.e.p-4) it overrode any CSS that came before it. This is especially important as I use Angular Material, which forces their styles into the<head>earlier than application styles causing them to always win in a priority competition, and this behaviour cannot be changed.Important being forced on
@applyrules messes with complex custom classes (if you've ever tried to customise the browser's built-in slider input, you'll understand my pain), wherein instead of having my class reference a CSS variable and have that variable have sensible defaults that can simply be overridden with an inline style, i.e.With v4 now I am forced to set the variable with
!importantin order to override the default value I have set at 50%