Skip to content

@apply leading-none with important modifier makes every following leading-none also important #19108

@delphi-sucks

Description

@delphi-sucks

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;
}

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions