Instalar Tailwind CSS con Astro

Configurando Tailwind CSS en un proyecto Astro.

Crea tu proyecto

Comienza creando un nuevo proyecto Astro si aún no tienes uno configurado. El enfoque más común es usar create astro.

Terminal

npm create astro@latest my-project
cd my-project

Instala Tailwind CSS

Instala @tailwindcss/vite y sus dependencias peer a través de npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configura el plugin de Vite

Añade el plugin @tailwindcss/vite a tus plugins de Vite en tu archivo de configuración de Astro.

astro.config.mjs

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

Importa Tailwind CSS

Crea un archivo ./src/styles/global.css y añade un @import para Tailwind CSS.

global.css

@import "tailwindcss";

Inicia tu proceso de build

Ejecuta tu proceso de build con npm run dev.

Terminal

npm run dev

Comienza a usar Tailwind en tu proyecto

Comienza a usar las clases de utilidad de Tailwind para estilizar tu contenido asegurándote de importar el archivo CSS recién creado.

index.astro

---
import "../styles/global.css";
---
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>