This week I came across another tricky part of Tailwind, pseudo-elements. But what if you want to use them?
What are pseudo-elements anyway? Pseudo-elements are HTML elements that do not exist in the HTML markup at all. Such elements shouldn’t be visible to the browser assistive technology, they can only be styled visually with CSS. Some screen readers will read them anyway, though (as Lars Wikman pointed out to me).
It’s quite common to define the :before and :after pseudo-elements that style a non-existing element in position relative to the element at hand. People use it for typography or drawing to keep markup clean and tidy. A lot of times, they are used in code pens to showcase some advanced CSS.
I wanted to use these pseudo-elements to create a 3D book for a new version of the landing page of my book. It’s a project where I am trying out Tailwind for the first time.
Tailwind uses pre-defined classes and even though it could support these pseudo-elements in theory, it doesn’t. So the only option is to use actual elements with aria-hidden=”true” attribute to hide them from the browser assistive capabilities:
<div class="tailwind classes as usual" aria-hidden="true">
<!-- :before -->
</div>
<div class="tailwind classes as usual">
<!-- main element -->
</div>
<div class="tailwind classes as usual" aria-hidden="true">
<!-- :after -->
</div>
The author of Tailwind already expressed that pseudo-elements are not necessary, so I don’t think we get them in a future Tailwind release. There is an unofficial tailwind-pseudo plugin, though, which you can try.
