Conoce Tailwind, Un Nuevo Framework Css

tailwindcss

Qué es tailwind css?

Citando la documentación oficial:

«Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.»

 

Tailwind is a utility-first Css Framework.

 

Css Framework

Bien… pensarás que estamos ante «otro» framework css, pero me adelantaré a decir que este es particularmente diferente, tailwind:

  • NO viene con un kit de interface de usuario listo para usar, es decir, NO hay «Componentes» como: paneles, alertas, formularios o botones.
  • NO tiene un tema o estilo por defecto.
  • NO decide cómo debe verse tu sitio.
  • NO impone un patrón de diseño para que lo sigas y/o tengas que acoplarte a él.

Las anteriores características se han descrito con un «NO» para que sepas lo que NO hace tailwind, esto, para algunos puede ser criterio suficiente a la hora de decidir qué herramientas usar. Pero si quieres conocer más… A continuación encontrarás las características que hacen de este framework uno de mis favoritos.

 

Utility.

La palabra «utilidad», en esta ocasión hace referencia a «clases útiles», es decir, clases que son de gran ayuda a lo largo de la construcción de un diseño, por ejemplo, Bootstrap 4 viene con una sección completamente dedicada a estas clases (Bootstrap 4 – Utilities). Es muy probable que ya hayas usado clases útiles en tu diseño:

  • mt-0 clase útil para margin-top: 0;.
  • text-right clase útil para text-align: right;
  • text-white` clase útil para color: #fff;
  • entre otras …

Sí, esto son clases útiles y normalmente son usadas para «arreglar» o «hacker» un diseño ya existente, es decir, son usadas al final de la construcción del diseño.

 

Utility-first

Traduciremos el término como «Utilidades Primero» o «Primero lo útil». Es decir, antes de construir cualquier diseño, o escribir css personalizado, PRIMERO se usarán clases útiles, y para todo lo que sea posible se usará ese enfoque. Así, podrás construir el diseño que te sea requerido o que has imaginado, y todo a partir de el uso de clases que no comprometen el diseño ni intervienen con otras decisiones del proyecto.

Ahora se entiende «un poco mejor» la diferencia entre los framework tradicionales y los Utility-first frameworks.

Tailwind nace para dar una gran ventaja a la hora de implementar diseños personalizados y propios de una marca o identidad, suministrando una gran cantidad de clases útiles de bajo nivel que facilitarán esa tarea.

 

Ver en acción

Desde la documentación Oficial puedes encontrar algunos ejemplos:

Sitios en producción – construidos por el autor de este post:

Colección comunidad internacional

 

Conclusión

Ahora conoces un nuevo Framework Css que aunque está en sus primeros días, se ha mostrado muy activo y popular en la comunidad de desarrolladores. Una herramienta que está a tu disposición para cuando lo consideres útil y quieras probar.

 

Referencias

Comparte este artículo

Entra en la discusión y deja tu comentario

Veces