Como integrar Tailwindcss a un proyecto de React.
Tags: react, tailwindcss, npm
Published: 2021-04-29 23:09:54

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](https://reactjs.org/docs/create-a-new-react-app.html)

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.
![Project React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6ff1334zq1wkz4anhyl.png) 
Si quieres profundizar respecto a este tema te dejo este link:
[Configuracion de postcss.config.js](https://tailwindcss.com/docs/configuration).

###### 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](https://tailwindcss.com/docs/adding-base-styles)
[Extracting Component](https://tailwindcss.com/docs/extracting-components)
[Adding New Utilities](https://tailwindcss.com/docs/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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfu8v1nr3g9w21428pbg.png)

###### 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. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wueqik7krts0cizy7z6.png)
Te dejo un link con códigos de componentes de tailwindcss:
[Container docs](https://tailwindcss.com/docs/container) 

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnhql5q2tmgsqu43mbjf.png)  

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