Primeros Pasos, Instalar Tailwind CSS utilizando React y Vite

¿Cómo crear un proyecto React + Tailwind CSS con Vite?

Crear un proyecto con React + Tailwind CSS con Vite es bastante sencillo.

1. Empezamos creando un nuevo proyecto React con Vite.

   npm create vite@latest miproyecto -- --template react
   cd miproyecto
   

2. En este punto tenemos un proyecto React creado, podemos abrirlo y verlo ejecutándose.

   npm run dev
   

3. Agregamos tailwind al proyecto e inicializamos el proyecto.

   npm i -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

4. Actualizamos el archivo tailwind.config.js para habilitar postcss y autoprefixer.

   /** @type {import('tailwindcss').Config} */
   export default {
       content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
       theme: {
           extend: {},
       },
       plugins: [],
   }
   

5. Reemplaza el archivo src/index.css con las directivas de tailwind.

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

6. Actualiza el archivo src/App.tsx con un “Hola Mundo” que incluya algunas directivas de tailwind.

   export default function App() {
       return <h1 className="text-3xl font-bold underline">Hola Mundo!</h1>
   }
   

   Conforme realicemos cambios estos se verán reflejados dentro del proyecto.

Hemos podido instalar el un proyecto React + Tailwind CSS utilizando Vite de manera sencilla. Con solo unos pasos tenemos un servidor local funcionando ejecutando nuestro proyecto. Vite entre otras opciones ofrece la posibilidad de Hot Reloading, es decir que cuando realicemos cambios en el proyecto, estos cambios se mostrarán de forma inmediata en el navegador.