¿Cómo configurar TailwindCSS con create-react-app?

¿Qué es TailwindCSS?

Es un framework de bajo nivel, altamente personalizable que nos provee una cantidad grande de clases utilitarias que podemos utilizar en nuestro HTML para realizar cualquier estilo y/o animación que queramos sin interferir con tu propio CSS.

Inicializar el proyecto 🎉

Lo que haremos es empezar un proyecto de create-react-app desde cero con los siguientes comandos:

# npm
npx create-react-app tailwind-cra
# yarn
yarn create react-app tailwind-cra

➡️ Luego de que el proyecto se haya configurado entraremos a la carpeta:

cd tailwind-cra

📦 Y ahora vamos a proceder a instalar TailwindCSS en nuestro proyecto:

# npm
npm i tailwindcss
# yarn
yarn add tailwindcss

⚙ Ahora vamos a configurar nuestros scripts para que ejecute Tailwind:

"scripts": {
  "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
  "prestart": "npm run build:tailwind",
  "prebuild": "npm run build:tailwind",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

El script build:tailwind va a compilar nuestro archivo src/tailwind.css y generará un archivo src/tailwind.output.css (lo usaremos luego para importarlo en nuestra aplicación).

⚠️ Nota: la generación de src/tailwind.css solo se hará una vez cada vez que ejecutemos un script, si queremos editar estilos propios de nuestro sitio es mejor utilizar un .css o .scss aparte.

Configuremos nuestros estilos

Dentro de nuestra carpeta src vamos a crear un archivo tailwind.css con el siguiente contenido:

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

Ahora vamos a editar nuestro App.js y pondremos el siguiente código:

// Dependencies
import  React  from  "react";
// Styles
import "./tailwind.output.css";
const App = () => {
  return (
    <div className="min-h-screen bg-gray-500">
      <h2 className="text-center text-4xl font-bold text-blue-900">TailwindCSS + React</h2>
    </div>
  );
};
export  default  App;

Ahora que ya tenemos todo listo solo debemos iniciar nuestra aplicación con:

# npm
npm run start
# yarn
yarn start

Este script se encargará de generar nuestro archivo de tailwind.output.css dentro de src y luego de eso levantará nuestra aplicación, la cual debería verse algo así

🎉 Listo! Tenemos nuestra aplicación hecha con create-react-app junto con Tailwind para poder darle estilos.

Recomendaciones

No hacer cambios en tailwind.output.css ya que cada vez que se corra el script tus cambios serán sobre escritos corriendo o start o build. En lugar de eso debemos poner nuestros cambios en src/tailwind.css y reiniciar el script cada vez que hagamos un cambio. (Recomiendo hacer un archivo aparte para manejar estilos y no utilizar tailwind.css)

❕ Importante: debemos agregar tailwind.output.css a nuestro .gitignore para evitar que le hagamos commit a GitHub, GitLab o BitBucket ya que este archivo será generado antes de correr o start o build.

Preparándonos para producción 🚀 y una sorpresa 🤩

Ahora vamos a instalar dos dependencias que vamos a necesitar:

# npm
npm i npm-run-all chokidar-cli
# yarn
yarn add npm-run-all chokidar-cli

• npm run all es un paquete de npm que sirve para correr varios scripts al mismo tiempo
• chokidar-cli es un paquete que nos sirve para ver cambios en cualquier archivo que especifiquemos en nuestro proyecto

Ahora vamos a cambiar nuestros scripts en el package.json:

"scripts": {
  "build:tailwind": "tailwind build src/tailwind.css -o src/tailwind.output.css",
  "watch:tailwind": "chokidar 'src/**/*.css' 'src/**/*.scss' --ignore src/tailwind.output.css -c 'npm run build:tailwind'",
  "start": "npm-run-all build:tailwind --parallel watch:tailwind start:react",
  "start:react": "react-scripts start",
  "prebuild": "run-s build:tailwind",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

🎉 Sorpresa! notarás que hemos agregado un script llamado watch:tailwind, este script nos servirá para realizar un nuevo build cada vez que el css cambie, ignorando tailwind.output.css para que así evitemos tener loops infinitos de build.

Archivo de configuración de Tailwind

En la raíz de nuestro proyecto vamos a crear un archivo tailwind.config.js con este código:

module.exports = {
  purge: [
    'src/**/*.js',
    'src/**/*.jsx',
    'src/**/*.ts',
    'src/**/*.tsx',
    'public/**/*.html',
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Una de las características más fascinantes es que le podemos indicar a Tailwind dónde están los archivos que tienen sus clases y así el hace una limpieza en build para eliminar clases que no estemos utilizando y que tengamos un archivo con un peso mínimo en nuestro .css final.

Conclusiones ✨

En este blogpost aprendimos a cómo realizar una configuración para nuestra aplicación de React creada a través de CRA y además pudimos ver cómo realizar realtime watch de nuestros archivos de .css para detectar cualquier cambio que tengamos 🙌.

Si quieres saber cómo personalizar las clases de Tailwind puedes ir a este enlace de la documentación para saber más sobre que directivas podemos modificar y extender, ahora, sin más nada que agregar.

- Los veo en el código 👨‍💻