Skip to main content

📌 Guía de Instalación y Uso de Tailwind CSS v4 con Vite y React

📖 Especificaciones Técnicas​

Este documento cubre la instalación y configuración de Tailwind CSS v4 en un proyecto React + Vite con las siguientes versiones:

  • Node.js: v20.9.0
  • Vite: create-vite@6.3.1
  • Tailwind CSS: v4
  • React.js: v19.0.0

🚀 Creación del Proyecto con Vite​

Ejecuta el siguiente comando en la terminal para crear el proyecto con React y Vite:

npm create vite@latest my-tailwind-app

Después, sigue las instrucciones en pantalla y selecciona:

  • Framework: React
  • Variant: JavaScript o TypeScript según tu preferencia.

Luego, accede al directorio del proyecto y instala las dependencias:

cd my-tailwind-app
npm install

🔥 Limpieza del Proyecto Inicial​

Antes de instalar Tailwind, elimina los archivos y contenido innecesarios:

  1. Borrar contenido de estilos:

    • src/index.css
    • src/app.css

  2. Eliminar archivos innecesarios:

    • Carpeta src/assets
    • Código en src/App.jsx

Tu proyecto ahora está limpio y listo para instalar Tailwind CSS v4.

🎨 Instalación de Tailwind CSS v4​

Ejecuta el siguiente comando en la terminal para instalar Tailwind CSS junto con su plugin para Vite:

npm install tailwindcss @tailwindcss/vite

⚙️ Configuración de Tailwind en Vite​

Edita vite.config.js y agrega Tailwind como un plugin:

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

🖌️ Importar Tailwind en el Archivo CSS Global​

Abre src/index.css y agrega las directivas de Tailwind en la parte superior:

@import "tailwindcss";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Esto resetea los estilos globales para evitar problemas con los valores por defecto de los navegadores.

✅ Verificar que Tailwind CSS Funciona​

Para asegurarte de que Tailwind CSS está correctamente instalado, abre App.jsx y prueba con una clase de Tailwind:

export default function App() {
  return (
    <div className="flex justify-center items-center h-screen bg-gradient-to-r from-blue-500 to-purple-500">
      <h1 className="text-white text-4xl font-bold">¡Tailwind CSS v4 funcionando! 🚀</h1>
    </div>
  );
}

Si Tailwind está funcionando correctamente, deberías ver un fondo con gradiente y un texto centrado.

🔎 Mejoras y Recomendaciones​

🔹 Extensión para VS Code​

Para mejorar la experiencia de desarrollo en Visual Studio Code, instala la extensión:

🔗 Tailwind CSS IntelliSense

Esto proporciona autocompletado, sugerencias y validación de clases.

🌟 Novedades en Tailwind CSS v4​

🚀 CSS Anidado en Tailwind​

Tailwind ahora soporta CSS anidado gracias a LightningCSS. Esto permite escribir estilos de manera más limpia y organizada.

Ejemplo de CSS anidado:

.typography {
  p {
    font-size: var(--text-base);
  }
  img {
    border-radius: var(--radius-lg);
  }
}

💡 Beneficio: Hace que la estructura del código CSS sea más legible y mantenible.

🎯 Componentes UI con Tailwind​

Tailwind ofrece bloques preconstruidos para interfaces de usuario en su Tailwind UI Plus.

🔗 Explora UI Blocks aquí: Tailwind UI Blocks

Ejemplo de un Hero Section con Tailwind:

export default function Hero() {
  return (
    <section className="bg-gray-900 text-white py-20">
      <div className="container mx-auto text-center">
        <h1 className="text-5xl font-bold">Optimiza tu desarrollo con Tailwind CSS v4 🚀</h1>
        <p className="mt-4 text-lg">Construye interfaces modernas con un framework rápido y flexible.</p>
        <button className="mt-6 px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg">
          Empezar Ahora
        </button>
      </div>
    </section>
  );
}

📌 Beneficio: Usar UI Blocks acelera el desarrollo y proporciona diseños profesionales con Tailwind CSS.

📌 Resumen Rápido​

  1. Crear proyecto con Vite + React → npm create vite@latest
  2. Instalar Tailwind → npm install tailwindcss @tailwindcss/vite
  3. Configurar Vite → Agregar tailwindcss en vite.config.js
  4. Importar Tailwind en index.css → @import "tailwindcss";
  5. Probar Tailwind → Agregar clases en App.jsx
  6. Explorar nuevas características → CSS anidado, UI Blocks

🚀 Conclusión​

Tailwind CSS v4 mejora la eficiencia del desarrollo al ofrecer soporte para CSS anidado, UI Blocks y optimización de rendimiento. Integrarlo con Vite y React es rápido y fácil, lo que permite crear interfaces modernas sin esfuerzo.

🔹 ¿Quieres aprender más? Visita la documentación oficial de Tailwind CSS.

📌 ¡Ahora estás listo para construir con Tailwind CSS v4! 🎨🚀