Hoy en día existen varias maneras de instalar Tailwind CSS en un proyecto hecho con React y Vite. La forma más común que muchos tutoriales explican suele ser:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Después, el archivo tailwind.config.js se configura así:

/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {}, },
plugins: [], }

En tu CSS principal (src/index.css o similar), se agrega:

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

En mi experiencia, aunque esta forma es muy popular, me encontré con errores constantemente. En varios proyectos no terminaba funcionando bien: errores de compilación, clases que no aplicaban, o problemas de configuración entre PostCSS y Tailwind.

Buscando una alternativa más simple, revisé la documentación oficial actualizada de Tailwind CSS 4.1 (versión 2025). Ahí descubrí una forma más directa de instalar Tailwind como un plugin de Vite, que es más segura y rápida para proyectos modernos. 

Instalar Tailwind como plugin de Vite

Instalar Tailwind y su plugin para Vite

npm install tailwindcss @tailwindcss/vite

Configurar vite.config.ts o vite.config.js

En la configuración ya estándar se agrega estas líneas

 

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

3. Importar Tailwind en tu CSS

Crea (o edita) tu archivo de estilos, por ejemplo src/styles.css, y simplemente importa Tailwind:

@import "tailwindcss";

Aunque existen varias formas de instalar Tailwind en React + Vite, usar el plugin oficial @tailwindcss/vite es el método más actualizado, compatible y sencillo para 2025. Evitas configuraciones extra y errores comunes.