Cleaner syntax for applying multiple utilities to pseudo-elements (before:, after:, first-letter:, etc.)

[mdtaufiquekhan]

Hi Tailwind team and community 👋,

I’d like to start a discussion about how we handle pseudo-elements (::before, ::after, ::first-letter, etc.) in Tailwind.

When styling pseudo-elements in Tailwind, we currently repeat the prefix for every single utility.

For example:

<!-- before example -->
<div class="before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-red-500"></div>

<!-- first-letter example -->
<p class="first-letter:text-4xl first-letter:font-bold first-letter:text-blue-600">
  Lorem ipsum dolor sit amet...
</p>

This works well, but it feels verbose compared to standard CSS, where we write all styles in a single selector:

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: red;
}

p::first-letter {
  font-size: 2rem;
  font-weight: bold;
  color: blue;
}

🔹 Discussion Idea

Would it make sense to explore a more concise syntax for applying multiple utilities to the same pseudo-element?
For example:

<!-- Hypothetical syntax -->
<div class="before:(absolute top-0 left-0 w-full h-full bg-red-500)"></div>

<p class="first-letter:(text-4xl font-bold text-blue-600)">
  Lorem ipsum dolor sit amet...
</p>

This could:

• Reduce repetition
• Improve readability
• Make pseudo-element styling feel more like writing a single CSS block

🔹 Why Start This Conversation

Pseudo-elements (::before, ::after, ::first-letter, ::selection, etc.) are widely used.

• Tailwind is all about developer experience, and this feels like an area for improvement.

Has anyone else felt this pain point?
Would this kind of syntax fit Tailwind’s philosophy, or is explicit repetition better?

Thanks for reading! Excited to hear the community’s thoughts! 🙌

[wongjn]

There have been suggestions about adding such a feature. The maintainers have addressed this request before, that you may wish to read up on if you have not already done so:

• A Twitter thread from the creator of Tailwind, Adam Wathan
• A previous GitHub discussion thread with maintainer responses

[mdtaufiquekhan]

Oh wow, that’s interesting! Glad to know I’m not the only one who thought about this.
Thanks a lot for sharing those links — I’ll definitely read through them. Appreciate you pointing me in the right direction! 🙌