Tailwind CSS: un marco e API CSS de primeira utilidade para un deseño rápido e sensible

Tailwind CSS Framework

Aínda que estou fondo na tecnoloxía a diario, non teño tanto tempo como me gustaría compartir as complexas integracións e automatización que a miña empresa implementa para os clientes. Tamén non teño moito tempo para descubrir. A maioría da tecnoloxía sobre a que escribo son empresas que buscan Martech Zone cubríndoas, pero de cando en vez, especialmente a través de Twitter, vexo algo de ruído sobre unha nova tecnoloxía que teño que compartir.

Se traballas en deseño web, desenvolvemento de aplicacións móbiles ou incluso simplemente configuras un sistema de xestión de contido, probablemente loitaches coas frustracións de estilos competidores en varias follas de estilo. Mesmo coas sorprendentes ferramentas de desenvolvemento construídas en cada navegador, o seguimento e limpeza de CSS pode requirir moito tempo e enerxía.

Cadros CSS

Nos últimos anos, os deseñadores fixeron un traballo bastante sorprendente lanzando coleccións de estilos preparados e listos para usar. Estas follas de estilo CSS son máis coñecidas como marcos CSS, intentando acomodar todos os diferentes estilos e capacidades de resposta para que os desenvolvedores só poidan facer referencia a un marco en vez de construír un ficheiro CSS desde cero. Algúns marcos populares son:

  • Bootstrap - un marco que evolucionou ao longo dunha década, introducido por primeira vez por Twitter. Ofrece infinidade de funcións. Ten desvantaxes, que requiren SASS, difícil de revisar, dependente de JQquery e é bastante pesado cargar.
  • Buscar - un marco limpo que é amigable para os desenvolvedores e que non depende de JavaScript.
  • Fundación - un framework CSS máis xenérico e utilizable que ten toneladas de compoñentes facilmente personalizables. Ademais, hai Fundación para o correo electrónico UI de movemento para animacións.
  • Kit de IU - unha combinación de HTML, JavaScript e CSS para que o teu front-end se desenvolva de xeito rápido e sinxelo.

Tailwind CSS Framework

Mentres que outros frameworks fan un gran traballo acomodando elementos populares da interface de usuario, Tailwind usa unha metodoloxía coñecida como CSS atómico. En resumo, Tailwind organizou enxeñosamente os nomes das clases usando a linguaxe natural para facer o que din que fan. Así, aínda que Tailwind non ten unha biblioteca de compoñentes, a capacidade de construír facilmente unha interface potente e sensible só facendo referencia aos nomes das clases CSS é elegante, rápida e incomparable.

Aquí tes algúns excelentes exemplos:

Reixas CSS

columna css columnas de cuadrículas de inicio

Gradientes CSS

gradientes css

Soporte CSS para modo escuro

css modo escuro

Tailwind tamén ten un fantástico extensión dispoñible para VS Code para que poida identificar e inserir facilmente as clases do editor de código de Microsoft.

Aínda máis enxeñoso, Tailwind elimina automaticamente todos os CSS non utilizados cando se constrúe para a produción, o que significa que o paquete CSS final é o máis pequeno que podería ser. De feito, a maioría dos proxectos de Tailwind envían ao cliente menos de 10 KB de CSS.

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.