Cómo usar Tailwind CSS para desarrollar rápidamente sitios web elegantes

A medida que avanza como desarrollador, es más probable que utilice tecnologías que lo ayuden a hacer más escribiendo menos código. Un marco frontend sólido como Tailwind CSS es una forma de lograrlo.

En este artículo, aprenderemos sobre Tailwind CSS, un marco CSS que ayuda a crear y diseñar páginas web. Comenzaremos explicando cómo instalar e integrar Tailwind CSS en su proyecto, veremos algunas aplicaciones prácticas y también cómo puede crear sus complementos y estilos personalizados.

¿Emocionado? ¡Vamos a empezar!

¿Qué es Tailwind CSS?

Tailwind CSS es un marco CSS (hojas de estilo en cascada) de primera utilidad con clases predefinidas que puede usar para crear y diseñar páginas web directamente en su marcado. Te permite escribir CSS en tu HTML en forma de clases predefinidas.

Definiremos qué es un marco y qué entendemos por "CSS de utilidad primero" para ayudarlo a comprender mejor de qué se trata Tailwind CSS.

¿Qué es un marco?

Como término general de programación, un marco es una herramienta que proporciona componentes reutilizables y listos para usar creados a partir de las características de una herramienta ya existente. El propósito general de crear marcos es aumentar la velocidad de desarrollo haciendo menos trabajo.

Ahora que hemos establecido el significado de un marco, debería ayudarlo a comprender que Tailwind CSS es una herramienta construida sobre características de CSS. Todas las funcionalidades del marco se derivaron de estilos CSS compuestos como clases.

¿Qué es un marco CSS de utilidad primero?

Cuando decimos CSS de utilidad primero, nos referimos a clases en nuestro marcado (HTML) con funcionalidades predefinidas. Esto implica que solo tiene que escribir una clase con estilos predefinidos adjuntos, y esos estilos se aplicarán al elemento.

En el caso de que esté trabajando con Vanilla CSS (CSS sin ningún marco o biblioteca), primero le daría a su elemento un nombre de clase y luego adjuntaría diferentes propiedades y valores a esa clase, lo que, a su vez, aplicará estilo a su elemento. .

Te mostraremos un ejemplo. Aquí, crearemos un botón con esquinas redondeadas y un texto que diga "Haz clic en mí". Así es como se verá el botón:

Primero haremos esto usando Vanilla CSS y luego usaremos las clases de utilidad disponibles en Tailwind CSS.

Con vainilla CSS

 <button class="btn">Click me</button>

Le hemos dado a las etiquetas de botón la clase btn , que se diseñará usando una hoja de estilo externa. Es decir:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

Con Tailwind CSS

 <button class="bg-black p-2 rounded">Click me</button>

Todo esto es necesario para lograr el mismo efecto que el ejemplo con Vanilla CSS. No se creó ninguna hoja de estilo externa donde tienes que escribir los estilos porque cada nombre de clase que usamos ya tiene un estilo predefinido.

Requisitos previos para usar Tailwind CSS

Antes de usar Tailwind CSS, hay algunos requisitos previos que debe considerar cumplir para usar las funciones del marco sin dificultades. Éstos son algunos de ellos:

• Buen conocimiento de HTML, su estructura y su funcionamiento.
• Base sólida en CSS: consultas de medios, flexbox y sistema de cuadrícula

¿Dónde se puede usar Tailwind CSS?

Puede usar Tailwind CSS en proyectos web frontend, incluidos marcos de JavaScript como React.js, Next.js, Laravel, Vite, Gatsby, etc.

Pros y contras de Tailwind CSS

Estas son algunas de las ventajas de usar Tailwind CSS:

1. Proceso de desarrollo más rápido
2. Te ayuda a practicar más tu CSS ya que las utilidades son similares
3. Todas las utilidades y componentes son fácilmente personalizables
4. El tamaño total del archivo para la producción suele ser pequeño
5. Fácil de aprender si ya sabes CSS
6. Buena documentación para aprender.

Algunas de las desventajas de usar Tailwind CSS incluyen:

1. Su marcado puede parecer desorganizado para proyectos grandes porque todos los estilos están en los archivos HTML.
2. No es fácil de aprender si no entiendes bien CSS.
3. Estás obligado a construir todo desde cero, incluidos los elementos de entrada. Cuando instala Tailwind CSS, elimina todos los estilos CSS predeterminados.
4. Tailwind CSS no es la mejor opción si busca minimizar el tiempo dedicado a desarrollar la interfaz de su sitio web y centrarse principalmente en la lógica del backend.

Cuándo usar Tailwind CSS

Tailwind CSS se utiliza mejor para acelerar el proceso de desarrollo escribiendo menos código. Viene con un sistema de diseño que ayuda a mantener la coherencia en varios requisitos de diseño, como relleno, espaciado, etc.; con esto, no tienes que preocuparte por crear tus sistemas de diseño.

También puede usar Tailwind CSS si está buscando usar un marco que sea fácilmente configurable porque no lo obliga a usar componentes (barras de navegación, botones, formularios, etc.) de la misma manera todo el tiempo; puedes elegir cómo deberían verse tus componentes. Pero nunca debes usar Tailwind si no has aprendido y practicado CSS.

Similitudes y diferencias entre Tailwind CSS y otros marcos CSS

Aquí hay algunas similitudes:

1. Le ayudan a hacer el trabajo más rápido.
2. Vienen con clases predefinidas.
3. Fueron construidos sobre las reglas de CSS.
4. Ambos son fáciles de aprender y usar con un conocimiento práctico de CSS.

Ahora veamos algunas de las diferencias:

1. Tailwind es diferente de la mayoría de los marcos porque tiene que crear sus componentes. Por ejemplo, Bootstrap tiene componentes como barras de navegación, botones, etc., pero con Tailwind, tienes que construir todo eso tú mismo.
2. Algunos marcos como Bootstrap no se pueden personalizar fácilmente, por lo que se ve obligado a utilizar sus patrones de diseño. En Tailwind, tú controlas el flujo de todo.
3. Se requiere un conocimiento profundo de CSS para usar Tailwind. Escribir nombres de clase no es suficiente, ya que debe combinarlos como si estuviera escribiendo CSS estándar para lograr el mismo resultado. Todo lo que necesita saber en la mayoría de los otros marcos es qué componente se construirá cuando use un nombre de clase.

Cómo comenzar a usar Tailwind CSS

Antes de instalar Tailwind CSS e integrarlo en su proyecto, asegúrese de que:

1. Tiene Node.js instalado en su computadora para hacer uso del administrador de paquetes de Node (npm) en la terminal.
2. Su proyecto está todo configurado con sus archivos creados.

Así es como se ve la estructura de nuestro proyecto en este momento:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

A continuación, inicie una terminal para su proyecto y ejecute los siguientes comandos:

 npm install -D tailwindcss

El comando anterior instalará el marco Tailwind CSS como una dependencia. A continuación, genere su archivo tailwind.config.js ejecutando el siguiente comando:

 npm install -D tailwindcss

El archivo tailwind.config.js estará vacío cuando se cree, por lo que debemos agregar algunas líneas de código:

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

Las rutas de archivo proporcionadas en la matriz de contenido permitirán a Tailwind purgar/eliminar cualquier estilo no utilizado durante el tiempo de compilación.

Lo siguiente que debe hacer es agregar las directivas "@tailwind" a su archivo CSS en la carpeta src ; aquí es donde Tailwind genera todos sus estilos de utilidad predefinidos para usted:

 @tailwind base; @tailwind components; @tailwind utilities;

Lo último que debe hacer es iniciar el proceso de compilación ejecutando este comando en su terminal:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

En el código anterior, le decimos a Tailwind que nuestro archivo de entrada es la hoja de estilo en la carpeta src y que cualquier estilo que hayamos usado debe integrarse en el archivo de salida en la carpeta pública. --watch permite a Tailwind observar su archivo en busca de cambios para un proceso de compilación automático; omitirlo significa que tenemos que ejecutar ese script cada vez que queremos construir nuestro código y ver el resultado deseado.

Usando Tailwind CSS

Ahora que instalamos y configuramos Tailwind CSS para nuestro proyecto, veamos algunos ejemplos para entender su aplicación completamente.

Ejemplo de caja flexible

Para usar flex en Tailwind CSS, debe agregar una clase de flex y luego la dirección de los elementos flexibles:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

El uso flex-row-reverse invertirá el orden en que aparecen los botones.

flex-col los apila uno encima del otro. Aquí hay un ejemplo:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Al igual que en el ejemplo anterior, flex-col-reverse invierte el orden.

Ejemplo de cuadrícula

Al especificar columnas y filas en el sistema de cuadrícula, adoptamos un enfoque diferente al pasar un número que determinará cómo los elementos ocuparán el espacio disponible:

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

Colores

Tailwind viene con muchos colores predefinidos. Cada color tiene un conjunto de variaciones diferentes, siendo la variación más clara 50 y la más oscura 900.

Aquí hay una imagen de varios colores y sus códigos hexadecimales HTML para ilustrar esto

Daremos un ejemplo de cómo puede hacer esto usando el color rojo de arriba para darle un color de fondo a un elemento de botón:

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

Esta sintaxis es la misma para todos los colores en Tailwind excepto para el blanco y el negro, que se escriben de la misma manera pero sin el uso de números: bg-black y bg-white .

Para agregar color de texto, usa la clase text-{color} :

 <p class="text-yellow-600">Hello World</p>

Relleno

Tailwind ya tiene un sistema de diseño que lo ayudaría a mantener una escala constante en todos sus diseños. Todo lo que tiene que saber es la sintaxis para aplicar cada utilidad.

Las siguientes son utilidades para agregar relleno a sus elementos:

• p denota relleno en todo el elemento.
• py denota padding padding-top y padding-bottom.
• px denota relleno a la izquierda y relleno a la derecha.
• pt denota acolchado superior.
• pr denota relleno derecho.
• pb denota parte inferior del relleno.
• pl denota relleno izquierdo

Para aplicarlos a sus elementos, debe usar los números apropiados proporcionados por Tailwind, un poco similares a los números que representan las variantes de color en la última sección. Esto es lo que queremos decir:

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

Margen

Las utilidades predefinidas para padding y margin son muy similares. Tienes que reemplazar la p con una m :

• m
• my
• mx
• mt
• mr
• mb
• ml

Cómo crear un complemento CSS de Tailwind

Aunque Tailwind CSS tiene muchas utilidades y sistemas de diseño ya creados para usted, aún es posible que tenga una funcionalidad particular que le gustaría agregar para ampliar el uso de Tailwind. Tailwind CSS nos permite hacer esto creando un complemento.

Ensuciémonos las manos creando un complemento que agregue el color aguamarina y una utilidad de rotación que gire un elemento 150 en el eje X. Haremos estas utilidades en el archivo tailwind.config.js usando un poco de JavaScript.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

Ahora, analicemos esto. Lo primero que hicimos fue importar la función de complemento de Tailwind:

 const plugin = require("tailwindcss/plugin");

Luego pasamos a crear nuestros complementos en la matriz de complementos:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Es posible que deba volver a ejecutar el script de compilación después de crear su complemento.

Ahora que los complementos están listos, podemos probarlos:

 <button class="bg-aqua rotate-150deg">Click me</button>

Si hiciste todo bien, deberías tener un botón con un color aguamarina con el texto rotado a 150 en el eje X.

Resumen

Los marcos son una opción invaluable cuando se trata de acelerar su flujo de trabajo. Le ayudan a crear páginas web atractivas y profesionales manteniendo la coherencia en el diseño. Tailwind CSS proporciona muchas clases CSS de servicios públicos para ayudarlo a llevar su diseño y desarrollo web al siguiente nivel.

Este artículo nos enseñó qué es Tailwind CSS y qué lo convierte en un marco. Luego observamos el proceso de instalación y vimos algunos ejemplos que mostraban cómo podíamos crear nuestros complementos personalizados para ampliar la funcionalidad existente.

Si ha seguido hasta este punto, ahora tiene una comprensión básica pero sólida de cómo funciona Tailwind. Sin embargo, para mejorar en el uso de un marco de utilidad primero, debe seguir practicando y aumentar su conocimiento de CSS si aún no tiene una base sólida.

¿Ha utilizado Tailwind CSS u otro marco CSS en el pasado? ¡Comparte tus pensamientos en la sección de comentarios!