Tailwind CSS

Framework de CSS utilitario

Tailwind CSS es un framework de diseño de código abierto para construir interfaces de usuario modernas y receptivas en aplicaciones web. A diferencia de los enfoques tradicionales de diseño que se basan en clases CSS individuales y específicas, Tailwind CSS se centra en clases utilitarias que se aplican directamente en el marcado HTML para estilizar los elementos.

Ver Sitio oficial: Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Ver listado de tokens: Tailwind CSS Cheat Sheet

Características

Tailwind CSS se define como:

Una API para un sistema de diseño.
Una herramienta que va en contra de las "buenas prácticas CSS" (estas no sirven).
Refuerza la práctica de insertar "estilos en línea" dentro de los elementos HTML.

Como lo hace:

Presinde del atributo <...style=""> para delegar esa tarea al atributo <...class=""> usando clases utilitarias que son fáciles de entender.

Pros:

Usa una convención de tokens con valores predeterminados que simplifican las propiedades CSS.
Luego de editar los estilos y compilar en la etapa de producción, se remueve el CSS que no se usa.
Es más rápido de editar ya que el CSS se modifica dentro del documento y en los mismos elementos HTML.
Bien documentado.

Contras:

Satura el atributo class por lo que a veces resulta poco legible en su extensión.
Si no se conocen la mayoría las propiedades CSS, puede resultar difícil reconocer los valores que se asocian a cada token de clase utilitaria (la curva de aprendizaje depende mucho del manejo de los tokens).
Al prescindir de la semántica de clase CSS (una buena práctica manual), cuesta entender que propósito tiene cada parte de un componente en HTML. (puede corregirse con @apply)
Debe estilizarse cada elemento independiente de su instancia por lo que resulta repetitivo. (puede corregirse con @apply)