Crear un proyecto React moderno empieza por elegir herramientas que te quiten fricción. Con Vite y Tailwind CSS montas en minutos un entorno listo para enfocarte en componentes y estilos, ideal si recién inicias en el ecosistema React.

Esta guía te muestra el flujo completo: desde el comando de instalación hasta el primer Hola, mundo con clases de Tailwind funcionando en pantalla.

¿Por qué usar Vite para iniciar un proyecto React?

Vite es una herramienta de build moderna que elimina configuraciones complejas y te deja crear componentes desde el primer minuto. En lugar de pelearte con bundlers tradicionales, corres un comando y tienes el proyecto listo [00:14].

¿Qué es Vite? Es una herramienta que prepara tu proyecto React sin que tengas que configurar webpack ni babel. Solo escribes el comando, respondes unas preguntas y empiezas a programar.

El comando para iniciar es directo: npm create vite@latest. Al ejecutarlo, la terminal te pregunta el nombre del proyecto, el framework y el lenguaje. Para este flujo eliges react-course, React y JavaScript [01:00].

¿Cómo verifico que Vite creó mi proyecto?

Después de responder las preguntas, ejecuta ls en tu terminal para listar los archivos generados. Verás una carpeta con los folders base, el package.json y los archivos iniciales que Vite arma por ti [01:30].

Abre esa carpeta en tu editor de código y revisa la estructura antes de seguir. Esto te da contexto sobre qué archivos vas a tocar después.

¿Cómo instalar Tailwind CSS en un proyecto Vite?

Tailwind CSS es un framework de utilidades que te permite aplicar estilos directamente desde el HTML usando clases. Para un proyecto minimalista como este, encaja perfecto [00:32].

La instalación sigue tres pasos que toma directo de la documentación oficial:

1. Ejecuta el primer npm install que aparece en la guía oficial de Tailwind, dentro de la carpeta del proyecto [02:20].
2. Corre el segundo comando que genera los archivos de configuración, incluido tailwind.config [02:45].
3. Copia el bloque de rutas que indica la documentación y pégalo dentro de la propiedad content del archivo tailwind.config [03:05].

¿Para qué sirve la propiedad content en tailwind.config? Le dice a Tailwind en qué archivos buscar clases para generar solo los estilos que realmente usas. Sin eso, tus clases no se aplican.

¿Dónde van las directivas de Tailwind en React?

Tailwind necesita tres directivas base para funcionar: @tailwind base, @tailwind components y @tailwind utilities. Estas líneas van en tu archivo CSS principal, que en un proyecto Vite con React es src/App.css [03:30].

Después de pegarlas y guardar, levantas el servidor con npm run dev. Vite te muestra una URL local en la terminal que abres en el navegador para ver el proyecto corriendo [04:00].

¿Cómo dejar limpio el proyecto inicial de Vite?

El boilerplate de Vite trae un logo animado, estilos por defecto y un contador con useState. Para empezar desde cero conviene removerlo todo [04:30].

Estos son los pasos de limpieza:

• Elimina la carpeta assets completa, no la necesitas en este punto.
• Borra el contenido de App.css para quitar los estilos por defecto.
• En App.jsx quita la importación del logo de React, el useState y el JSX inicial.
• Vacía también index.css, ya que centra el contenido y rompe tu layout [05:40].

Deja un solo div con un texto como Hola, mundo para verificar que todo sigue funcionando.

¿Cómo confirmo que Tailwind CSS está activo?

Aplica una clase de utilidad sobre el div y revisa el navegador. Por ejemplo, bg-red-100 pinta un fondo rosado suave. Si el color aparece, Tailwind está leyendo tus archivos correctamente [05:00].

La documentación oficial lista todos los colores y variantes disponibles. Buscas background color y eliges el tono que quieras probar.

¿Qué significa bg-red-100 en Tailwind? Es una clase de utilidad que aplica un color de fondo rojo en su versión más clara. El número 100 indica la intensidad: a mayor número, más oscuro el tono.

¿Qué versión de Vite usar para seguir este flujo?

El proyecto se construye sobre Vite versión 4 [06:30]. Si trabajas con una versión más reciente y algo no responde igual, vale la pena fijarte en este dato para alinear el entorno y evitar diferencias de comportamiento.

Con Vite instalado, Tailwind CSS conectado y un Hola, mundo renderizando con clases de utilidad, ya tienes la base lista para el siguiente paso: enrutamiento con React Router Dom.

¿Cómo te quedó tu primer Hola, mundo? Comparte en los comentarios cualquier ajuste que hiciste durante la instalación.