Skip to content

Primeros pasos con Tailwind

Tailwind es otro popular framework de diseño web que, de hecho, está ganando mucha popularidad estos últimos años, por su facilidad de integración con otros frameworks y herramientas populares, como Angular, Vite o algunos motores de plantillas de Laravel, entre otros.

En este documento daremos unas nociones generales de cómo incorporarlo a nuestros diseños y crear unas primeras páginas de prueba. Podemos consultar todo esto y más en su web oficial

1. Descarga y/o instalación

Una de las principales diferencias entre Tailwind y Bootstrap es que, a diferencia de este último, en Tailwind no existe un paquete a descargar con cientos de estilos predefinidos. Tal y como se indica en la documentación oficial, lo que Tailwind hace es escanear el contenido HTML de nuestras páginas, detectar los estilos que necesitamos y generar únicamente el CSS necesario para ellos.

Por este motivo, la forma más habitual de uso de Tailwind es instalarlo como plugin en nuestros proyectos. Por ejemplo, en el caso de proyectos Vite:

# Creamos el proyecto Vite
npm create vite@latest proyecto1
cd proyecto1

# Instalamos Tailwind
npm install tailwindcss @tailwindcss/vite

A continuación, iremos al fichero de configuración de Vite, vite.config.ts, y lo añadimos como plugin:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

En nuestro fichero CSS (src/style.css) añadimos una línea para importar Tailwind:

@import "tailwindcss";

Finalmente, debemos asegurarnos de incluir el CSS en nuestro head:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite & Tailwind</title>
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <h1>Prueba de Tailwind</h1>
  </body>
</html>

1.1. Otras opciones de uso

Aunque la que hemos visto antes es la opción más habitual, existen otras formas en que podemos emplear Tailwind en nuestras aplicaciones:

  • Una de ellas es enlazar con el CSS a través de CDN. Esta opción no se recomienda, porque se tarda mucho más en cargar y procesar los estilos, y se aconseja sólo usarla para pruebas en desarrollo (consultar web oficial para URL actualizada):
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  • Otra opción es usar la interfaz de línea de comandos propia de Tailwind (Tailwind CLI) para procesar automáticamente nuestra web y generar el CSS. Para ello debemos instalar @tailwindcss/cli (además de tailwindcss) en nuestro proyecto, importarlo en nuestro CSS y ejecutar un comando similar a este para procesar los estilos, cambiando los ficheros de entrada y salida por los que queramos, y luego incluyendo el fichero de salida en lugar del original de entrada en nuestro HTML:
npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch

2. Combinar Tailwind con estilos propios

Si queremos combinar los estilos proporcionados con Tailwind con los nuestros propios, una forma habitual y sencilla es incluir estos estilos propios en el mismo CSS donde importamos Tailwind, aunque debemos tener la precaución de priorizar el orden en que se aplican los estilos empleando capas. Por ejemplo:

@import "tailwindcss";

@layer base 
{
  h1 
  {
    color: red;
  }  
}

3. Herramientas adicionales

Igual que ocurre con otros frameworks, podemos utilizar alguna herramienta adicional para facilitarnos el trabajo con Tailwind, como por ejemplo la extensión Tailwind CSS IntelliSense de Visual Studio Code, que podéis consultar aquí.

Esta extensión ofrece algunas funcionalidades interesantes:

  • Autocompletado de clases Tailwind en el código
  • Resaltar errores en CSS
  • Previsualizar los estilos que se aplicarán
  • ...

Ejercicio 1

Crea un proyecto llamado tailwind_prueba_vite en Vite, y sigue los pasos vistos antes para crear una página de prueba con un encabezado h1. Personalízalo con tus propios estilos para cambiar el color del texto.

4. Ventajas e inconvenientes de Tailwind

Entre las ventajas que aporta Tailwind frente a otros frameworks CSS como Bootstrap, podemos resaltar:

  • Es CSS utility first, es decir, proporciona una serie de utilidades CSS, como veremos a continuación, más personalizables para visualizar nuestros elementos HTML.
  • Permite crear temas para ajustar algunas opciones CSS, como tipografías, tamaños, colores...
  • El compilador de Tailwind optimiza el CSS generado, haciendo que ocupe menos espacio
  • Plugins ya definidos y un amplio ecosistema de componentes predefinidos por la comunidad. Por ejemplo, en flowbite podemos encontrar distintos componentes ya hechos en Tailwind para incorporar en nuestros diseños.
  • Documentación oficial muy completa (también en Bootstrap)

Entre las desventajas que podemos encontrar (algunas compartidas con Bootstrap), destacamos:

  • El tamaño del HTML crece considerablemente, al incluir varias clases en los elementos para definir su diseño
  • Esta acumulación de clases en cada elemento hace que sean difíciles de leer e identificar
  • El mantenimiento de esta estructura puede resultar más costoso
  • Menor separación de tareas, al incluirse diseño y maquetación en el HTML