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