content utility with before/after variants adds the content CSS property twice #18178Description
What version of Tailwind CSS are you using?
v4.1.8
What build tool (or framework if it abstracts the build tool) are you using?
Tailwind Play
Reproduction URL
https://play.tailwindcss.com/rO3bQlDyWh 6CA4
Describe your issue
The content utility adds the content property. Since the content property is required to display ::before and ::after pseudo-elements, the CSS rule content: var(--tw-content); is automatically added to the class when using before or after variants.
However, if I apply a custom content utility together with the before or after variants, the content property is added to the class twice:
- First, due to the
before/aftervariant (source: ./src/variants.ts L641 - L667) - Second, due to the
contentutility
/* Generated Utilities */
.content-\[\'custom\'\] {
--tw-content: 'custom';
content: var(--tw-content);
}
.before\:content-\[\'custom\'\] {
&::before {
content: var(--tw-content);
--tw-content: 'custom';
content: var(--tw-content);
}
}
.after\:content-\[\'custom\'\] {
&::after {
content: var(--tw-content);
--tw-content: 'custom';
content: var(--tw-content);
}
}In this case, it would be sufficient to keep only one of them.
/* Expected Generated Utilities */
.content-\[\'custom\'\] {
--tw-content: 'custom';
content: var(--tw-content);
}
.before\:content-\[\'custom\'\] {
&::before {
--tw-content: 'custom';
content: var(--tw-content);
}
}
.after\:content-\[\'custom\'\] {
&::after {
--tw-content: 'custom';
content: var(--tw-content);
}
}Metadata
Metadata
Assignees
Labels
No labels