DEV Community

Iratxe
Iratxe

Posted on • Edited on

Cómo instalar y configurar Tailwind CSS 4 con React y Vite (paso a paso)

Tailwind CSS 4 ha llegado con muchos cambios interesantes. En este post te mostraré cómo instalarlo, configurarlo y dar los primeros pasos con esta nueva versión, usando React y Vite como base.

Si necesitas instalarlo en otro entorno (como Next.js, Laravel, PostCSS o incluso desde la CLI), puedes consultar las opciones oficiales en la documentación de Tailwind CSS.

🚀 Crear el proyecto con Vite + React + TypeScript

Antes de instalar Tailwind, necesitas crear tu proyecto con Vite. Si ya lo tienes creado, puedes saltarte esta parte.
Desde la terminal:
npm create vite

Elige el nombre del proyecto, las tecnologias (React y TypeScript + SWC) sigue los pasos para la configuración inicial y listo.

🛠️ 1. Instalar Tailwind CSS y su plugin para Vite

Una vez creado el proyecto, accede al directorio y ejecuta lo siguiente:

npm install -D tailwindcss @tailwindcss/vite

⚙️ 2. Configurar Tailwind en vite.config.ts

Importa el paquete de tailwindcss y añadelo dentro del array de plugins que tienes configurado, junto a React.
Configuración del plugin Tailwind en vite.config.ts

🎨 3. Importar Tailwind en tu archivo CSS

En el archivo index.css añade la importación de tailwindcss, de esta manera ya podrías empezar a utilizarlo.
No es necesario importar index.css para que funcione, ¡vamos a verlo!

Directivas de Tailwind CSS en index.css

💡 4. Probar que Tailwind funciona

Para comprobar que funcione borra el contenido por defecto del componente principal (App.tsx) y añade una etiqueta con algunas clases utilitarias de Tailwind.

Componente App con estilos Tailwind aplicados

Ahora ejecuta en la terminal npm run dev y comprueba en el navegador que funciona:

Imagen de la web comprobando los estilos aplicados

🎨 5. Personalizar colores en Tailwind CSS 4

Hasta aquí ya hemos visto que con esta nueva versión apenas hay que hacer configuraciones y podemos fácilmente empezar a trabajar.
Lo siguiente que veremos es cómo configurar nuestras clases unitarias personalizadas en esta nueva versión.

Una novedad de Tailwind 4 es que ya no necesitas el archivo tailwind.config.ts para personalizar tu configuración. Ahora puedes usar la directiva @ theme directamente en tu index.css.

Por ejemplo, para añadir una paleta de colores personalizada, puedes usar herramientas como UI Colors. Esta herramienta genera un bloque de configuración que puedes pegar así:

Paleta de colores añadida en el archivo index.css

Ahora puedes usar tu color personalizado directamente:

Componente App con estilos personalizados de Tailwind

Imagen de la web aplicando los estilos personalizados

¿Qué te ha parecido esta nueva instalación y configuración de Tailwind CSS 4?

Top comments (0)