¿Cómo configurar Tailwind 3 en React con CRA 5?

En este artículo, veremos cómo configurar Tailwind 3 en React con CRA 5, pero antes de eso, necesitamos algunas ideas básicas sobre esta tecnología.

• React JS: una biblioteca de JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook.
• TailwindCSS: un marco CSS altamente personalizable, de bajo nivel y de primera utilidad para crear rápidamente interfaces de usuario personalizadas.
• Crear aplicación React: nos ayuda a crear aplicaciones React de una sola página sin configurar Webpack y babel.
• PostCSS: utiliza complementos basados ​​en JavaScript para automatizar las operaciones rutinarias de CSS.
• Autoprefixer: un complemento de postcss que realiza automáticamente el prefijo del proveedor.

Nota: si planea usar Tailwind en un proyecto existente, asegúrese de estar usando la versión 5.0.0 o superior de CRA. Si aún usa CRA v4, deberá instalar CRACO (Crear anulación de la configuración de la aplicación React) para anular la configuración de PostCSS. 

requisitos previos:

Antes de continuar, asegúrese de que node y npm estén instalados en su máquina. Si es necesario, visite Instalación de Node.js en Linux  o Instalación de Node.js en Windows

Creación de la aplicación y configuración de React:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale Tailwind, PostCSS y Autoprefixer en su directorio dado.

npm install -D tailwindcss postcss autoprefixer

Nota:   si va a implementar esta aplicación en Heroku o cualquier plataforma en la nube similar, asegúrese de que las dependencias de desarrollo no se eliminen durante la compilación. O puede eliminar el indicador -D del comando anterior para instalar estos paquetes como dependencias guardadas.

Paso 4: Configuración e importación de Tailwind en el proyecto.

npx tailwindcss init -p

Este comando generará automáticamente archivos de configuración para tailwind y postcss.

tailwind.config.js

module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

Paso 5: ahora ubique tailwind.config.js en la raíz del directorio y agregue las siguientes rutas al objeto de contenido para purgar las clases de CSS no utilizadas.

• ./src/**/*.{js,jsx,ts,tsx}
• ./público/index.html

Al final, el archivo tailwind.config.js debería verse como

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html",
],
theme: {
extend: {},
},
plugins: [],
}

Paso 6: Importar Tailwind a nuestra aplicación

Ahora importe las directivas del viento de cola en un archivo CSS que se usaría/importaría en toda la aplicación. De forma predeterminada, es index.css , pero puede usar cualquier otro archivo CSS si no desea importar Tailwind en toda la aplicación.

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

Paso 7: Ejecute la aplicación desde el directorio raíz del proyecto, usando el siguiente comando.

npm run start

Ejemplo: ahora crearemos un componente div básico y le aplicaremos algunas clases de CSS.

índice.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);