A medida que avanzas como desarrollador, es más probable que utilices tecnologías que te ayuden a hacer más escribiendo menos código. Un marco de trabajo frontal sólido como Tailwind CSS es una forma de conseguirlo.
En este artículo, aprenderemos sobre Tailwind CSS, un framework CSS que ayuda a construir y diseñar páginas web. Empezaremos explicando cómo instalar e integrar Tailwind CSS en tu proyecto, veremos algunas aplicaciones prácticas y también cómo puedes crear tus estilos y plugins personalizados.
¿Emocionado? ¡Empecemos!
Echa un Vistazo a Nuestro Videotutorial sobre el Uso de Tailwind CSS para Construir Sitios Web:
¿Qué es Tailwind CSS?
Tailwind CSS es un marco de trabajo CSS (Hojas de Estilo en Cascada) con clases predefinidas que puedes utilizar para construir y diseñar páginas web directamente en tu marcado. Te permite escribir CSS en tu HTML en forma de clases predefinidas.
Definiremos lo que es un marco de trabajo y lo que queremos decir con » CSS con prioridad de utilidad» para ayudarte a entender mejor de qué trata Tailwind CSS.
¿Qué es un marco de trabajo?
Como término general de programación, un marco de trabajo es una herramienta que proporciona componentes reutilizables y listos para usar construidos 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 ayudarte a entender que Tailwind CSS es una herramienta construida a partir de las características de CSS. Todas las funcionalidades del framework se derivan de los estilos CSS compuestos como clases.
¿Qué es un marco CSS con prioridad de utilidad?
Cuando decimos CSS con prioridad de utilidad, nos referimos a clases en nuestro marcado (HTML) con funcionalidades predefinidas. Esto implica que sólo tienes que escribir una clase con estilos predefinidos adjuntos, y esos estilos se aplicarán al elemento.
En el caso de que trabajes con CSS de vainilla(CSS sin ningún marco o biblioteca), primero darías a tu elemento un nombre de clase y luego adjuntarías diferentes propiedades y valores a esa clase, que, a su vez, aplicarán el estilo a tu elemento.
Te mostraremos un ejemplo. Aquí crearemos un botón con esquinas redondeadas y un texto que diga «Hazme clic» Este es el aspecto que tendrá el botón:
Primero haremos esto usando CSS vainilla, y luego usando las clases de utilidad disponibles en Tailwind CSS.
Con CSS vainilla
<button class="btn">Click me</button>Hemos dado a las etiquetas de los botones la clase btn, que se estilizará utilizando una hoja de estilos externa. Esto es:
.btn {
background-color: #000;
color: #fff;
padding: 8px;
border: none;
border-radius: 4px;
}Con Tailwind CSS
<button class="bg-black text-white p-2 rounded">Click me</button>Todo esto es necesario para conseguir el mismo efecto que el ejemplo con CSS vainilla. No se ha creado ninguna hoja de estilos externa en la que tengas que escribir los estilos porque cada nombre de clase que hemos utilizado ya tiene un estilo predefinido.
Requisitos previos para utilizar Tailwind CSS
Antes de utilizar Tailwind CSS, hay algunos requisitos previos que debes considerar para poder utilizar las funciones del framework sin dificultades. He aquí algunos de ellos:
- Buen conocimiento de HTML, su estructura y su funcionamiento
- Sólidos fundamentos en CSS – consultas de medios, flexbox y sistema de rejilla
¿Dónde se puede utilizar Tailwind CSS?
Puedes utilizar Tailwind CSS en proyectos web frontales, incluyendo frameworks de JavaScript como React.js, Next.js, Laravel, Vite, Gatsby, etc.
Ventajas y desventajas de Tailwind CSS
Estas son algunas de las ventajas de utilizar Tailwind CSS:
- Proceso dedesarrollo más rápido
- Te ayuda a practicar más tu CSS ya que las utilidades son similares
- Todas las utilidades y componentes son fácilmente personalizables
- El tamaño total del archivo para la producción suele ser pequeño
- Fácil de aprender si ya conoces el CSS
- Buena documentación para el aprendizaje
Algunas de las desventajas de usar Tailwind CSS son:
- Tu marcado puede parecer desorganizado para proyectos grandes porque todos los estilos están en los archivos HTML.
- No es fácil de aprender si no entiendes bien el CSS.
- Te ves obligado a construir todo desde cero, incluidos los elementos de entrada. Cuando instalas Tailwind CSS, elimina todos los estilos CSS por defecto.
- Tailwind CSS no es la mejor opción si buscas minimizar el tiempo dedicado a desarrollar el frontend de tu sitio web y centrarte principalmente en la lógica del backend.
¿Cuándo utilizar 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 el relleno, el espaciado, etc.; con esto, no tienes que preocuparte de crear tus sistemas de diseño.
También puedes utilizar Tailwind CSS si quieres utilizar un marco de trabajo que sea fácilmente configurable porque no te obliga a utilizar los componentes (barras de navegación, botones, formularios, etc.) de la misma manera todo el tiempo; puedes elegir el aspecto de tus componentes. Pero nunca deberías utilizar Tailwind si no has aprendido y practicado CSS.
Similitudes y diferencias entre Tailwind CSS y otros marcos CSS
He aquí algunas similitudes:
- Te ayudan a hacer el trabajo más rápido.
- Vienen con clases predefinidas.
- Están construidos sobre reglas CSS.
- Son fáciles de aprender y utilizar con un conocimiento práctico de CSS.
Ahora veamos algunas de las diferencias:
- Tailwind es diferente de la mayoría de los frameworks porque tienes que crear tus componentes. Por ejemplo, Bootstrap tiene componentes como barras de navegación, botones, etc., pero con Tailwind, tienes que construir todo eso tú mismo.
- Algunos frameworks como Bootstrap no son fácilmente personalizables, por lo que te ves obligado a utilizar sus patrones de diseño. En Tailwind, tú controlas el flujo de todo.
- Para utilizar Tailwind se requiere un profundo conocimiento de CSS. No basta con escribir los nombres de las clases, ya que debes combinarlas como si estuvieras escribiendo CSS de vainilla para conseguir el mismo resultado. Lo único que necesitas saber en la mayoría de los demás frameworks es qué componente se construirá cuando utilices un nombre de clase.
Cómo empezar a utilizar Tailwind CSS
Antes de instalar Tailwind CSS e integrarlo en tu proyecto, asegúrate de que
- Tienes Node.js instalado en tu ordenador para poder utilizar el gestor de paquetes de Node (npm) en el terminal.
- Tu proyecto está listo con los archivos creados.
Este es el aspecto de la estructura de nuestro proyecto en este momento:
-Tailwind-tutorial
-public
-index.html
-styles.css
-src
-styles.cssA continuación, inicia un terminal para tu proyecto y ejecuta los siguientes comandos:
npm install -D tailwindcssEl comando anterior instalará el framework CSS Tailwind como dependencia. A continuación, genera tu archivo tailwind.config.js ejecutando el siguiente comando:
npx tailwindcss initEl archivo tailwind.config.js estará vacío cuando se cree, así que tendremos que añadir algunas líneas de código:
module.exports = {
content: ["./src/**/*.{html,js}", "./public/*.html"],
theme: {
extend: {},
},
plugins: [],
};Las rutas de los archivos proporcionadas en la matriz de contenido permitirán a Tailwind purgar/eliminar cualquier estilo no utilizado durante el tiempo de construcción.
Lo siguiente que hay que hacer es añadir las directivas «@tailwind» a tu archivo CSS en la carpeta src – aquí es donde Tailwind genera todos sus estilos de utilidad predefinidos para ti:
@tailwind base;
@tailwind components;
@tailwind utilities;Lo último que debes hacer es iniciar el proceso de construcción ejecutando este comando en tu terminal:
npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watchEn el código anterior, le estamos diciendo a Tailwind que nuestro archivo de entrada es la hoja de estilos de la carpeta src y que los estilos que hayamos utilizado tienen que incorporarse al archivo de salida de la carpeta public. --watch permite a Tailwind vigilar su archivo en busca de cambios para un proceso de construcción automático; omitirlo significa que tenemos que ejecutar ese script cada vez que queramos construir nuestro código y ver la salida deseada.
Usar Tailwind CSS
Ahora que hemos instalado y configurado Tailwind CSS para nuestro proyecto, vamos a ver algunos ejemplos para entender bien su aplicación.
Ejemplo de Flexbox
Para utilizar flex en Tailwind CSS, tienes que añadir una clase de flex y luego la dirección de los elementos flex:
<div class="flex flex-row">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
Si utilizas flex-row-reverse invertirás el orden en que aparecen los botones.
flex-col los apila uno encima del otro. Aquí tienes un ejemplo:
<div class="flex flex-col">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
Igual que el ejemplo anterior, flex-col-reverse invierte el orden.
Ejemplo de cuadrícula
Al especificar las columnas y filas en el sistema de cuadrícula, adoptamos un enfoque diferente al pasar un número que determinará cómo ocuparán los elementos 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 un montón de colores predefinidos. Cada color tiene un conjunto de variaciones diferentes, siendo la variación más clara la de 50 y la más oscura la de 900.
Aquí tienes una imagen de varios colores y sus códigos hexadecimales HTML para ilustrar esto
Vamos a dar un ejemplo de cómo puedes hacer esto utilizando el color rojo de arriba para dar 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 añadir el color del texto, se utiliza la clase text-{color}:
<p class="text-yellow-600">Hello World</p>Relleno
Tailwind ya tiene un sistema de diseño que te ayudará a mantener una escala consistente en todos tus diseños. Lo único que tienes que saber es la sintaxis para aplicar cada utilidad.
Las siguientes son utilidades para añadir relleno a tus elementos:
pdenota padding en todo el elemento.pydenota padding-top y padding-bottom.pxdenota padding-izquierda y padding-derecha.ptdenota padding-top.prdenota relleno-derecha.pbdenota el relleno inferior.pldenota relleno-izquierdo
Para aplicarlas a tus elementos, tendrías que utilizar los números apropiados proporcionados por Tailwind, algo parecido a los números que representaban 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 el relleno y el margen son muy similares. Tienes que sustituir el p por un m:
mmymxmtmrmbml
Cómo crear un plugin CSS de Tailwind
Aunque Tailwind CSS tiene un montón de utilidades y sistemas de diseño ya construidos para ti, todavía es posible que tengas una funcionalidad particular que te gustaría añadir para ampliar lo que se puede usar en Tailwind. Tailwind CSS nos permite hacerlo creando un plugin.
Vamos a ensuciarnos las manos creando un plugin que añada el color aqua y una utilidad de rotación que gire un elemento 150º en el eje X. Haremos estas utilidades en el archivo tailwind.config.js utilizando 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, vamos a desglosar esto. Lo primero que hicimos fue importar la función de plugin de Tailwind:
const plugin = require("tailwindcss/plugin");Luego pasamos a crear nuestros plugins en la matriz de plugins:
plugins: [
plugin(function ({ addUtilities }) {
const newUtilities = {
".bg-aqua": { background: "aqua" },
".rotate-150deg": {
transform: "rotateX(150deg)",
},
};
addUtilities(newUtilities);
}),
],Es posible que tengas que volver a ejecutar el script de construcción después de crear tu plugin.
Ahora que los plugins están listos, podemos probarlos:
<button class="bg-aqua rotate-150deg">Click me</button>Si lo has hecho todo bien, deberías tener un botón de color aqua con el texto girado a 150º en el eje X.
Resumen
Los frameworks son una opción inestimable a la hora de acelerar tu flujo de trabajo. Te ayudan a construir páginas web atractivas y profesionales, manteniendo la coherencia del diseño. Tailwind CSS proporciona muchas clases CSS de utilidad para ayudarte a llevar tu diseño y desarrollo web al siguiente nivel.
Este artículo nos enseñó qué es Tailwind CSS y qué lo convierte en un framework. Luego vimos el proceso de instalación y algunos ejemplos que mostraban cómo podíamos crear nuestros plugins personalizados para ampliar la funcionalidad existente.
Si has seguido hasta este punto, ahora tienes una comprensión básica pero sólida de cómo funciona Tailwind. Sin embargo, para mejorar en el uso de un marco de trabajo tan útil, debes seguir practicando y aumentar tus conocimientos de CSS si no tienes ya una base sólida.
¿Has utilizado Tailwind CSS o algún otro framework CSSen el pasado? ¡Comparte tus opiniones en la sección de comentarios!
Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics.
Connect with Ihechikara on Twitter.
Deja una respuesta