馃敟 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.