Instalación de React con Vite y TailwindCSS

Preparar el entorno de desarrollo es el primer paso para construir cualquier aplicación con React. Aquí se explica cómo instalar Vite como herramienta de construcción y TailwindCSS para los estilos, dejando el proyecto limpio y listo para trabajar.

¿Cómo instalar Vite para crear un proyecto React? [01:22]

Vite es una herramienta de desarrollo que permite olvidarse de configuraciones complejas y enfocarse directamente en la creación de componentes. Para iniciar un proyecto nuevo se utiliza el siguiente comando en la terminal:

bash npm create vite@latest

Al ejecutarlo, Vite hace algunas preguntas de configuración:

• Nombre del proyecto: se le asigna un nombre, por ejemplo react-course.
• Framework: se selecciona React.
• Variante: se elige JavaScript.

Una vez finalizado, Vite genera una carpeta con archivos y directorios preconfigurados. La versión utilizada en este caso es Vite 4 [05:38], un dato importante por si surge algún problema de compatibilidad.

¿Cómo agregar TailwindCSS al proyecto? [02:02]

Con el proyecto creado, el siguiente paso es instalar TailwindCSS, un framework de utilidades CSS que permite aplicar estilos directamente en las clases de los elementos HTML. La documentación oficial (disponible en los recursos) indica los comandos necesarios.

¿Cuáles son los pasos de instalación?

• Ejecutar el comando de instalación de dependencias dentro del proyecto.
• Ejecutar un segundo comando que genera el archivo de configuración tailwind.config.
• Copiar la configuración de rutas de contenido (content) dentro de tailwind.config para que Tailwind sepa qué archivos analizar [02:52].
• Pegar las directivas base de Tailwind en el archivo CSS principal, que en este caso es app.css dentro de la carpeta src [03:13].

Finalmente, se levanta el servidor de desarrollo con:

bash npm run dev

Vite muestra en la terminal una URL local con un puerto específico. Al abrirla en el navegador, el proyecto aparece con los elementos por defecto: un logo animado, un título y un contador [03:38].

¿Cómo limpiar el proyecto y verificar TailwindCSS? [04:02]

El scaffolding que genera Vite incluye archivos y estilos que no se necesitan para empezar desde cero. El proceso de limpieza es directo:

• Eliminar la carpeta assets, que contiene logos predeterminados.
• Borrar todo el contenido de app.css, ya que esos estilos vienen por defecto y no forman parte del proyecto.
• Simplificar app.jsx: se elimina el import de logos, el hook useState y todo el JSX innecesario, dejando únicamente un div con un texto como "Hola, mundo".
• Limpiar index.css: se remueven todos los estilos predeterminados que centraban el contenido en pantalla [05:05].

¿Cómo confirmar que Tailwind funciona correctamente?

Para verificar la integración, se aplica una clase de Tailwind directamente en el div:

jsx function App() { return ( <div className="bg-red-100"> Hola, mundo </div> ); }

export default App;

La clase bg-red-100 corresponde a un color de fondo que se puede consultar en la documentación de Tailwind bajo background color [04:42]. Si al recargar el navegador el fondo cambia, significa que TailwindCSS está funcionando correctamente.

Con esta configuración lista, el proyecto queda preparado para el siguiente paso: implementar enrutamiento con React Router. Comparte en los comentarios cómo te quedó tu primer "Hola, mundo" con Vite y TailwindCSS.