En ocasiones debemos utilizar pseudo-elementos dentro de nuestro código con tailwind. Por rapidez podemos vernos tentados a utilizar CSS custom, pero no es necesario. Taiilwind dispone de modificadores para aplicar estilos CSS a los pseudo-elementos. Para ello las clases con el modificador correspondiente se incluirán en el elemento que lo contendrá.
Before y After
Para utilizar los pseudo elementos :before y :after en Tailwind disponemos de los modificadores “before“ y “after”. Par trabajar con ellos, añadiremos las clases necesarias para estilizar el pseudo-elemento de la misma manera que lo haríamos con CSS puro:
Utilizaremos las utilidades de display y position según nuestras necesidades. Si tenemos que incluir contenido utilizaremos content-[] colocando dentro de los corchetes el texto que queramos añadir. Por ejemplo para colocar un astérisco después del label de un campo obligatorio dentro de un formulario.
after:content-[‘*’] after:text-red-400 after:bold
Ahora un ejemplo más complejo, crear un pequeño triángulo para colocarlo debajo de un div con texto, dando la imagen de una burbuja de chat incluiremos el siguiente código:
after:block after:w-0 after:absolute after:border-t-8 after:border-l-4 after:border-r-4 after:border-transparent after:border-t-blue
Placeholder
Para poder estilizar el placeholder de un input utilizaremos el modificador placeholder para añadir clases al input. Por ejemplo:
placeholder:text-sm placeholder:gray-700
Selection
Para modificar el aspecto de los elementos seleccionados por el usuario utilizaremos selection.
Si, por ejemplo queremos modificar el aspecto del texto cuando el usuario lo selecciona utilizaremos lo siguiente:
Selection:bg-yellow-400 selection:text-blue-800
First-line
Podremos modificar el aspecto de la primera línea de un texto utilizando first-line, colocando las clases correspondientes en el p o div contenedor del texto a modificar.
first-line:text-lg first-line:bold
First-letter
Muy similar al anterior, tendremos acceso a la primera letra de un texto
First-letter:text-4xl first-letter:bold first-letter:text-red-600
