Tailwind CSS: qué destaca a este framework Utility First

Tailwind CSS es un framework Utility First que permite a los usuarios definir co­m­po­ne­n­tes. El CSS es muy popular, pero requiere amplios co­no­ci­mie­n­tos previos.

Un framework CSS es una colección de funciones y elementos ne­ce­sa­rios para el diseño de páginas web. Como los de­sa­rro­lla­do­res pueden utilizar las opciones pree­xi­s­te­n­tes, se si­m­pli­fi­ca el diseño de la página web y la co­la­bo­ra­ción en equipo. Los fra­me­wo­r­ks CSS utilizan bi­blio­te­cas de código que se emplean en el código HTML para este fin.

Tailwind CSS es un popular framework Utility First de CSS y pro­po­r­cio­na a los usuarios clases CSS de nivel inferior en PostCSS que pueden uti­li­zar­se para definir co­m­po­ne­n­tes y diseños de forma in­de­pe­n­die­n­te. Tailwind CSS ha sido de­sa­rro­lla­do por Adam Wathan y publicado por primera vez en 2017. Desde entonces ha sido instalado por millones de usuarios.

Las pri­n­ci­pa­les ventajas de los fra­me­wo­r­ks Utility First, como Tailwind CSS, son la fle­xi­bi­li­dad y las po­si­bi­li­da­des de pe­r­so­na­li­za­ción derivadas. A di­fe­re­n­cia de las tra­di­cio­na­les Cascading Style Sheets (CSS), los fra­me­wo­r­ks Utility First no incluyen co­m­po­ne­n­tes pre­co­n­s­trui­dos, sino que ofrecen clases de fu­n­cio­na­li­da­des. Estas contienen estilos pre­de­fi­ni­dos que pueden aplicarse a un elemento, lo que si­m­pli­fi­ca el proceso, da lugar a un código más claro y pro­po­r­cio­na muchas opciones de diseño adi­cio­na­les que co­n­tri­bu­yen a crear páginas web más pe­r­so­na­li­za­das.

Tailwind CSS es es­pe­cia­l­me­n­te adecuado para usuarios con co­no­ci­mie­n­tos previos de CSS y para aquellos que estén fa­mi­lia­ri­za­dos con sus ca­ra­c­te­rí­s­ti­cas es­pe­cia­les. Tener co­no­ci­mie­n­tos básicos de HTML es im­po­r­ta­n­te para trabajar con el framework Utility First, ya que los co­m­po­ne­n­tes deben crearse de forma in­de­pe­n­die­n­te, y todos los estilos se almacenan di­re­c­ta­me­n­te en los archivos HTML. Excepto para algunos aspectos básicos como los márgenes, los tamaños y los colores, el Tailwind CSS no utiliza valores pre­de­te­r­mi­na­dos. Siempre que los de­sa­rro­lla­do­res tengan ex­pe­rie­n­cia, pueden utilizar Tailwind CSS para diseñar li­bre­me­n­te los elementos de la página web y ahorrar tiempo.

El CSS es adecuado para proyectos de frontend web de cualquier tipo y se puede utilizar junto con los fra­me­wo­r­ks de Ja­va­S­cri­pt más populares. Por ejemplo, Lavarel, Vue.js y React pueden uti­li­zar­se con Tailwind CSS. La co­m­bi­na­ción prescinde del enfoque orientado a objetos de muchos otros fra­me­wo­r­ks

Debido a su enfoque especial, Tailwind CSS no es adecuado para todo el mundo. Para saber si un enfoque Utility First es adecuado para ti, analiza las ventajas y de­s­ve­n­ta­jas de Tailwind CSS.

• No es necesario cambiar entre los archivos HTML y los archivos CSS. Por lo general, el trabajo es más fluido de esta manera.
• Trabajar con Tailwind CSS permite so­lu­cio­nes más pe­r­so­na­li­za­das para los elementos im­po­r­ta­n­tes de una página web. Esto hace que se distinga de los demás.
• Gracias a las clases pre­de­fi­ni­das y al uso de CSS Media Queries Tailwind CSS es un framework re­s­po­n­si­ve que también funciona bien en di­s­po­si­ti­vos móviles.
• El de­sa­rro­llo general es más rápido y se ve fa­ci­li­ta­do por las clases de Utility.
• Las clases pre­de­fi­ni­das ayudan a comprimir CSS.
• Tailwind CSS facilita la im­ple­me­n­ta­ción de co­m­po­ne­n­tes modal.
• El framework es estable y rara vez sufre bugs o errores.
• Si ya estás fa­mi­lia­ri­za­do con el CSS, la es­tru­c­tu­ra lógica y el enfoque del framework de las uti­li­da­des son una ventaja y la curva de apre­n­di­za­je es re­la­ti­va­me­n­te plana.
• Si ac­tua­l­me­n­te estás en proceso de aprender CSS y deseas utilizar Tailwind CSS al mismo tiempo, la do­cu­me­n­ta­ción completa y fácil de entender te guiará.

• No obstante, utilizar el framework por primera vez es bastante difícil si no tienes ex­pe­rie­n­cia con las pe­cu­lia­ri­da­des y ob­s­tácu­los del CSS.
• El código puede ser confuso porque mucha in­fo­r­ma­ción se almacena en el archivo HTML. Mezclar el diseño y el HTML viola el principio de “se­pa­ra­ción de intereses”.
• Cuando instalas Tailwind CSS, se eliminan los estilos CSS por defecto. Primero debes volver a crear todos los elementos. Esto se aplica a co­m­po­ne­n­tes im­po­r­ta­n­tes como los botones, los header o las barras de na­ve­ga­ción.
• Algunos elementos HTML se repiten en el marcado, por lo que el código viola el principio de “¡No te repitas!”. Esto ocurre, por ejemplo, cuando un de­te­r­mi­na­do elemento se va a utilizar varias veces en la página web.

Al igual que otros fra­me­wo­r­ks, Tailwind CSS pretende facilitar el proceso de creación de una página web. Gracias a las clases pre­de­fi­ni­das y a las reglas CSS conocidas, se pueden crear páginas web más rá­pi­da­me­n­te. Como el principio es siempre el mismo, los usuarios ex­pe­ri­me­n­ta­dos pueden cambiar de framework más rá­pi­da­me­n­te. Mientras que las so­lu­cio­nes co­n­ve­n­cio­na­les pro­po­r­cio­nan co­m­po­ne­n­tes fijos, como botones o barras de na­ve­ga­ción, Tailwind CSS permite, o mejor dicho, requiere la creación in­di­vi­dual. A di­fe­re­n­cia de otros fra­me­wo­r­ks, Tailwind CSS está dirigido a pro­fe­sio­na­les con amplios co­no­ci­mie­n­tos previos de CSS.

La forma más fácil de añadir Tailwind CSS es uti­li­za­n­do un gestor de paquetes. Pero debes tener Node.js instalado en tu máquina. Así es como se procede:

Crea un nuevo proyecto en el terminal.

Esto creará un archivo package.json en el di­re­c­to­rio raíz. La extensión “-y” se utiliza para es­ta­ble­cer los valores por defecto.

Para instalar la última versión estable de Tailwind CSS como de­pe­n­de­n­cia, utiliza el siguiente comando:

La in­s­ta­la­ción puede llevar unos minutos.

Para generar el archivo tailwind.config.js, introduce el siguiente comando:

El contenido del archivo debe tener el siguiente aspecto:

Accede a la carpeta src y añade las si­guie­n­tes líneas a tu archivo CSS:

Por último, introduce el siguiente comando en el terminal para iniciar el proceso de co­n­s­tru­c­ción:

La po­pu­la­ri­dad de Tailwind CSS no es de extrañar. Los de­sa­rro­lla­do­res ex­pe­ri­me­n­ta­dos que estén fa­mi­lia­ri­za­dos con los trucos CSS apre­cia­rán el framework que les permite trabajar más rápido y sin re­s­tri­c­cio­nes. Sin embargo, a los pri­n­ci­pia­n­tes les co­n­ve­n­dría utilizar una al­te­r­na­ti­va porque el framework es más difícil de aprender y hay más po­si­bi­li­da­des de cometer errores.

npx tai­l­wi­n­d­c­ss init