Instalación
Tailwind CSS funciona escaneando todos tus archivos HTML, componentes de JavaScript y cualquier otra plantilla en busca de nombres de clases, generando los estilos correspondientes y luego escribiéndolos en un archivo CSS estático.
Es rápido, flexible y confiable, sin tiempo de ejecución.
Instalar Tailwind CSS como plugin de Vite es la forma más fluida de integrarlo con frameworks como Laravel, SvelteKit, React Router, Nuxt y SolidJS.
Comienza creando un nuevo proyecto Vite si aún no tienes uno configurado. El enfoque más común es utilizar Create Vite.
npm create vite@latest my-projectcd my-projectInstala tailwindcss y @tailwindcss/vite a través de npm.
npm install tailwindcss @tailwindcss/viteAñade el plugin @tailwindcss/vite a tu configuración de Vite.
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})Añade un @import a tu archivo CSS que importe Tailwind CSS.
@import "tailwindcss";Ejecuta tu proceso de compilación con npm run dev o cualquier comando que esté configurado en tu archivo package.json.
npm run devAsegúrate de que tu CSS compilado esté incluido en el <head> (es posible que tu framework se encargue de esto por ti), luego comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/src/style.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>