Como integrar Tailwindcss a un proyecto de React.

#react #tailwindcss #npm

En mis proyecto de React siempre trabajo con el framework de css Bootstrap, le da un diseño único a las aplicaciones. Ultimamente esta muy de moda Tailwindcss un framework css muy potente y con un build muy ligero pero;como lo integro a mi app de react?

Bueno para eso debemos asumir que ya tenemos nuestra aplicación de react, sino sigue este link Create a New React App

Bien, hecho el anterior paso vamos a integrar tailwindcss a nuestro proyecto

1. Instalación de tailwindcss

npm install tailwindcss postcss-cli autoprefixer -D
npx tailwindcss init

Este paso nos instalará en nuestro proyecto las depedencias de tailwindcss, postcss-cli y autoprefixer. Debemos verificar que dichas dependencias existan en el archivo package.json de nuestro proyecto.

2.Configuracion de postcss.config.js

En la raíz de nuestro proyecto crearemos un archivo con el nombre de postcss.config.js y dentro copiaremos este código.

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Este archivo le dira a react que requiere de las dependencia de tailwind y autoprefixer y luego exportarlas.

Si quieres profundizar respecto a este tema te dejo este link:
Configuracion de postcss.config.js.

3. Crear tailwind.css

Ahora crearemos un archivo tailwind.css que sera nuestro .css como tradicionalmente conocemos.Es aconsejable crearlo en esta ruta src/assets/tailwind.css y dentro debemos copiar el siguiente código.

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

No te asuste si te marca un warning es normal.Dentro de este archivo escribiremos nuestra propia configuración de estilos de componentes,botones,color de fuente, entre otras opciones.En estos links se profundiza más sobre el tema:

Adding-base style
Extracting Component
Adding New Utilities

PD:En este mismo directorio creamos un archivo llamado main.css, lo dejamos vacío,aquí se almacenará la transpilación del código css de tailwindcss.

4. Configuración del package.json

Configuramos los comandos del package.json para poder ejecutar el npm start o npm run build a producción.La configuración es un poco diferente, ya que tenemos que compilar nuestro código de react conjunto con el de tailwindcss, para eso en el espacio de los script copiamos estos codigos:

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

5.Importación del main.css.

Ya por último en index.js de nuestro proyecto importaremos el archivo main.css que creamos en el paso 3.

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/main.css';
import App from './App.jsx';

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

También como extra en nuestro componente App.js podemos escribir algun código de algún componente de tailwindcss.

Te dejo un link con códigos de componentes de tailwindcss:
Container docs

Una vez hecho las configuraciones ya podemos ejecutar el comando en nuestra terminal npm start y deberá levantar un servidor local con nuestra aplicación.

Con estos 5 pasos puedes tener integrado Tailwindcss a nuestra aplicación de React y asi poder construir poderosos componentes y con diseño brillantes.

Saludos Codificados
Iosvany Alvarez
Full Stack Developer