Web Tutoriales

Integrar Tailwind en Astro

Cómo añadir la librería Tailwind CSS a proyectos Astro.

integrar-tailwind-astro

Tailwind es una librería CSS con un conjunto de reglas y classes utilitarias para estilizar nuestras páginas de forma super rápida. Astro es un framework JavaScript para desarrollar aplicaciones web que destaca por facilitar la generación de páginas estáticas además de permitir integrar otros frameworks conocidos como React, Vue, Angular, Svelte, etc.

Vamos a ver cómo integrar estas dos librerías para establecer el entorno adecuado para crear páginas de alto nivel.

Empezamos con un nuevo proyecto Astro

Primero necesitamos un proyecto Astro. Si aún no tenemos uno, podemos crearlo desde cero:

Terminal
npm create astro@latest

El asistente nos irá guiando. Podemos elegir una plantilla básica y seleccionar la instalación de dependencias (o user manualmente npm install más adelante).

Luego entramos al directorio del proyecto:

Terminal
cd nombre-de-tu-proyecto

Ya con esto, tenemos la base sobre la cual vamos a trabajar.

Instalamos Tailwind CSS

La integración de Tailwind pasa por instalar el paquete junto con algunas utilidades necesarias para que funcione bien con Astro:

Terminal
npm install tailwindcss @tailwindcss/vite

Configuramos Tailwind para que funcione con Astro

Creamos un archivo llamado tailwind.config.js para indicarle dónde están nuestros archivos Astro y otros componentes que usen clases de Tailwind.

tailwind.config.js
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

Con esto, Tailwind va a escanear los archivos indicados en busca de clases y generará el CSS correspondiente.

Importar Tailwind al proyecto

Ahora toca conectar Tailwind con nuestro código. Creamos un archivo CSS en src/styles/global.css (la ubicación es opcional). Dentro de ese archivo, colocamos lo básico:

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

Después, tenemos que importar este archivo en el proyecto. Una forma común es hacerlo en el archivo src/layouts/Layout.astro, si usamos un layout global. Si no, podemos importarlo directamente en la raíz del proyecto en src/pages/index.astro o donde sea conveniente:

---
import "../styles/global.css";
---
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Proyecto Astro con Tailwind</title>
  </head>
  <body class="bg-gray-100 text-gray-900">
    <h1 class="text-3xl font-bold text-center mt-8">Hola, Astro + Tailwind</h1>
  </body>
</html>

Esto ya debería funcionar. Si corremos el servidor con:

Terminal
npm run dev

Podemos ver nuestra página con los estilos aplicados.

En resumen

Integrar Tailwind CSS en un proyecto Astro no requiere pasos complicados ni configuraciones difíciles. Instalamos los paquetes, preparamos los archivos y en pocos minutos podemos comenzar a usar clases utilitarias en nuestras páginas. Es una combinación que encaja bien y nos permite enfocarnos en desarrollar sin distraernos con estilos repetitivos.

Siempre podemos ajustar y extender la configuración según lo que necesitemos. Pero lo más importante es que nos permite trabajar con libertad y mantener un flujo de trabajo cómodo, sin perder tiempo en lo que no nos aporta valor.