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.
🎨 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!
💡 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.
Ahora ejecuta en la terminal npm run dev
y comprueba en el navegador que funciona:
🎨 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í:
Ahora puedes usar tu color personalizado directamente:
¿Qué te ha parecido esta nueva instalación y configuración de Tailwind CSS 4?
Top comments (0)