Use a `content` utility with `before`/`after` variants adds the `content` CSS property twice

[rozsazoltan]

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

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/after variant (source: ./src/variants.ts L641 - L667)
• Second, due to the content utility

/* 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);
  }
}

[rozsazoltan]

I haven't checked, but I assume minification takes care of the duplication? Either way, the reason for the duplication is understandable, and it's not a big deal - I just wanted to leave a note.

[thecrypticace]

Lightning CSS doesn't appear to remove the duplicate content property. There being an extra one isn't really a big deal but maybe this is a micro optimization we can make when doing our internal optimize pass.