¿Por qué amo Tailwind?

Max Stoiber escribió algunas notas interesantes sobre por qué ama Tailwind. (Max creó componentes con estilo, por lo que tiene algo de experiencia en el juego de la metodología de estilo). Hay mucha historia excelente en esta publicación sobre cómo surgió Tailwind y se convirtió en una herramienta valiosa para diseñadores e ingenieros por igual, pero también habla sobre lo que supera a en el corazón del sistema Tailwind y lo que lo hace tan práctico:

La clave de la popularidad de Tailwind es el sistema minuciosamente construido de tokens de diseño en el núcleo del marco. Las restricciones cuidadosamente seleccionadas del sistema brindan a los desarrolladores las barreras de seguridad adecuadas. Hacen evidente si una elección es buena o mala al ofrecer sólo pasos discretos.

Enlaza a twin.macro, algo de lo que nunca había oído hablar antes, y luego da un ejemplo que se parece a este:

import "twin.macro"div tw="text-center md:text-left" /// ↓↓↓↓↓ turns into ↓↓↓↓↓import "styled-components/macro"div   css={{    textAlign: "center",    "@media (min-width: 768px)": {      "textAlign":"left"    }  }}/

Lo que sucede aquí es que puedes usar clases predefinidas tal como lo harías con Tailwind: agregar espacios, hacer una ronda div y un tamaño determinado, etc. Lo que hace twin.macro es permitirte usar estas clases, pero con los beneficios adicionales de CSS en JS. Max escribe:

Obtiene extracción de CSS crítica y división de código totalmente automática. Los usuarios solo cargarán exactamente los estilos que necesitan para la página que solicitaron, ¡nada más y nada menos!

Me encanta esto, usar Tailwind como abreviatura, tratándolo más como un azúcar sintáctico encima de CSS que como un marco. Cosas súper interesantes.