Tailwind css en React

En este post implementaremos Tailwind CSS en React con Vite, crearemos una guía paso a paso para configurar un proyecto React con Vite y Tailwind CSS desde cero.

Prerrequisitos

• Instalación react se explica a detalle como instar y configurar un entono de trabajo para react.
• Estructura de un proyecto React    Conocer los archivos principales, index.js, App.js, carpetas, etc.
• JSX  Sintaxis básica, reglas JSX, expresiones, fragmentos (<> </>).
• En el post de componentes en React se dan los primeros pasos para crear un componente.

Crear un proyecto de prueba

Antes de explicar los Hooks, vamos a crear un proyecto react para realizar los ejercicios que explicaremos a continuación:

npm create vite@latest

Donde seleccionamos:

> npx
> create-vite
|
o  Project name:
|  practicas-react
|
o  Select a framework:
|  React
|
o  Select a variant:
|  TypeScript

Por ultimo, ejecutamos

cd practicas-react
npm install
npm run dev

Vamos a crear un directorio llamado components en el directorio src

React Tailwind CSS

⏺️ Instalar Tailwind CSS

Para realizar este ejercicio, primero debemos tener un proyecto en react creado, si aun no tiene un proyecto revisa los post creados con anterioridad para continuar con los siguientes cambios.

Lo primero que vamos a hacer es instalar las dependencias necesarias para poder trabajar con tailwind:

npm install -D tailwindcss@3

tailwindcss: Es el núcleo de Tailwind CSS, un framework CSS basado en clases utilitarias que permite diseñar directamente en el marcado (HTML).

npm install -D postcss autoprefixer

• postcss: Es una herramienta para transformar CSS mediante plugins. Tailwind CSS utiliza PostCSS para procesar los estilos, como generar clases personalizadas o manejar el archivo de configuración de Tailwind.
• autoprefixer: Es un plugin de PostCSS que agrega automáticamente prefijos específicos de navegador a las propiedades CSS, lo que asegura compatibilidad con diferentes navegadores.

⏺️ Configurar tailwind

Crear un archivo de configuración llamado tailwind.config.js, para ello usamos el siguiente comando:

npx tailwindcss init -p

Esto creará dos archivos:

• tailwind.config.js
• postcss.config.js

Edita el archivo tailwind.config.js se usa para indicar las rutas de los archivos donde usarás las clases de Tailwind:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Asegúrate de incluir todos los archivos relevantes
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

En el caso anterior le indicamos al `content` que busque los archivos `js,jsx,ts,tsx` dento del folder `src`

⏺️ Crear/edita el archivo postcss.config.js

Si no tienes un archivo postcss.config.js, crea uno en la raíz del proyecto con este contenido:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

⏺️ Configurar los estilos de Tailwind

En el archivo src/index.css (o el archivo CSS principal de tu proyecto), agrega las directivas de Tailwind:

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

Esto importa los estilos base, componentes y utilidades de Tailwind en tu aplicación.

⏺️ Importar el archivo CSS en tu aplicación

Asegúrate de importar el archivo CSS con import './index.css' en src/index.js o src/index.tsx o src/main.tsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

⏺️ Iniciar tu aplicación

Ejecuta tu aplicación para verificar que Tailwind está funcionando:

npm start dev

Puedes probar si Tailwind está funcionando correctamente al agregar clases como bg-blue-500 o text-white en tus componentes.

⏺️ Ejemplo de Componente React

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        ¡Hola, Tailwind con React!
      </h1>
    </div>
  );
}

export default App;