Tailwind CSS es un framework de CSS basado en clases utilitarias que te permite estilizar componentes sin escribir hojas de estilo separadas. Aquí aprenderás cómo instalar Tailwind CSS en un proyecto Vite con React, configurarlo paso a paso y crear tu primer componente funcional. Es ideal si vienes de CSS tradicional y quieres acelerar tu flujo de trabajo.

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

La instalación sigue la documentación oficial y se resuelve con un par de comandos en tu terminal de Visual Studio Code.

1. Asegúrate de tener tu proyecto Vite ya creado.
2. Copia el primer comando de instalación de Tailwind desde la documentación y pégalo en la terminal.
3. Ejecuta el segundo comando que genera los archivos de configuración.

Este segundo paso crea dos archivos de configuración esenciales para que Tailwind funcione correctamente en tu proyecto.

¿Qué hace el comando de instalación de Tailwind? Descarga el framework y genera los archivos tailwind.config.js y postcss.config.js, donde defines qué archivos serán procesados por Tailwind.

¿Qué configurar en tailwind.config.js?

Dentro del archivo de configuración encontrarás una propiedad llamada content. Ahí debes indicar las rutas de los archivos donde usarás clases de Tailwind, como tus componentes .jsx. Copia el bloque que sugiere la documentación, pégalo, guarda y listo.

Luego ve al archivo index.css, borra los estilos previos que tenías y pega las directivas que indica la guía oficial. Estas líneas son las que activan Tailwind en tu hoja principal.

Finalmente ejecuta npm run dev para levantar el servidor. Si abres el navegador, verás que los componentes anteriores aparecen sin estilos: es la señal de que Tailwind ya tomó el control y está listo para que empieces a aplicar sus clases.

¿Cómo se traducen las propiedades de CSS a clases de Tailwind?

Una de las dudas más comunes al empezar es cómo migrar lo que ya sabes de CSS al sistema de clases utilitarias.

Por ejemplo, si estás acostumbrado a usar display: flex con flex: 1, en Tailwind simplemente añades la clase flex-1 al elemento. Lo mismo aplica para espaciados, sizing, tipografía y prácticamente cualquier propiedad de CSS. Cada propiedad tradicional tiene una analogía directa en la documentación de Tailwind.

¿Necesito archivos CSS adicionales con Tailwind? No. Toda la estilización ocurre directamente en el HTML o JSX mediante clases, lo que elimina la necesidad de mantener hojas de estilo separadas.

¿Cómo crear un componente con Tailwind en React?

Vamos a construir un componente sencillo que muestre un saludo con estilos aplicados desde Tailwind.

Estructura del componente Text

Dentro de tu carpeta Components, crea una nueva carpeta llamada Text y dentro un archivo text.jsx. La estructura básica usa una arrow function y un export default:

jsx const TailwindText = () => { return ( <h1 className="text-3xl font-bold underline"> Hello, world! </h1> ); };

export default TailwindText;

Nombrar el componente como TailwindText ayuda a identificar que pertenece al sistema de Tailwind dentro de tu proyecto.

Importar el componente en App.jsx

Ve a App.jsx, reemplaza el componente Button anterior por Text y guarda los cambios. Al revisar el navegador verás el texto "Hello, world!" con tres estilos aplicados:

• text-3xl define el tamaño de la fuente.
• font-bold aplica un grosor grueso a la tipografía.
• underline añade la línea inferior al texto.

Si inspeccionas el elemento en el navegador, podrás ver que cada clase corresponde a una propiedad y valor de CSS específicos. Esa transparencia es parte de lo que hace fácil aprender el framework.

¿Por qué usar Tailwind CSS en lugar de CSS tradicional?

La principal ventaja es la velocidad de desarrollo. Una vez que memorizas las clases más comunes o aprendes a navegar la documentación, puedes estilizar componentes completos sin salir del archivo JSX.

• Trabajas más rápido al escribir clases directamente en el marcado.
• Eliminas la necesidad de archivos CSS adicionales.
• Mantienes consistencia visual gracias al sistema de diseño predefinido.

Ahora te toca a ti: toma el componente TailwindText con "Hello, world!" y cámbiale el color usando una clase de Tailwind. Comparte tu solución en los comentarios y cuéntame qué clase elegiste.