En esta guía se muestra cómo instalar tailwindcss en Astro Build

---

Instalación en Astro

Para instalar Tailwind CSS en un proyecto de Astro, sigue estos pasos:

1. Crear un nuevo proyecto de Astro (si no lo tienes ya)

npm create astro@latest

2. Instalar Tailwind CSS y sus dependencias

npm install -D tailwindcss @astrojs/tailwind

3. Añadir la integración de Tailwind a astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [tailwind()],
});

4. Crear el archivo de configuración de Tailwind

Crea un archivo tailwind.config.cjs en la raíz del proyecto:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. Crear el archivo base de CSS

En tu archivo src/styles/global.css (o donde tengas tus estilos), añade las directivas de Tailwind:

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

6. Importar los estilos en tu proyecto

En tu archivo principal (por ejemplo, src/layouts/Layout.astro), importa los estilos:

---
import '../styles/global.css';
---

¡Ya puedes empezar a usar las clases de Tailwind en tu proyecto de Astro! Por ejemplo:

<text>&lt;div class="flex items-center justify-center min-h-screen bg-gray-100"&gt;
  &lt;h1 class="text-4xl font-bold text-blue-600"&gt;¡Hola Tailwind en Astro!&lt;/h1&gt;
&lt;/div&gt;</text>

Consejos adicionales

• Asegúrate de que tu editor tenga instalada la extensión de Tailwind CSS para obtener autocompletado
• Puedes personalizar los colores, fuentes y otros estilos en el archivo tailwind.config.cjs
• Usa el modo JIT (Just-In-Time) que viene por defecto en las últimas versiones para un mejor rendimiento