What version of Tailwind CSS are you using?
v4.1.14
What build tool (or framework if it abstracts the build tool) are you using?
cli
What version of Node.js are you using?
v22.20.0
What browser are you using?
Chrome
What operating system are you using?
Linux
Reproduction URL
https://play.tailwindcss.com/8ALgvPmwvv?file=css
Describe your issue
When using @apply
with the utility class leading-none
and the important modifier (leading-none!
), then every other leading-none
after the first usage of important also becomes important.
.c1 {
@apply leading-none;
}
.c2 {
@apply leading-none!;
}
.c3 {
@apply leading-none;
}
will generate
.c1 {
--tw-leading: 1;
line-height: 1;
}
.c2 {
--tw-leading: 1!important;
line-height: 1!important;
}
.c3 {
--tw-leading: 1!important;
line-height: 1!important;
}