¿Cómo configurar TailwindCSS con create-react-app?
Daniel Esteves
diciembre 20, 2020
5 minutos de lectura
¿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:
# npmnpx create-react-app tailwind-cra# yarnyarn 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:
# npmnpm i tailwindcss# yarnyarn 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:
// Dependenciesimport React from "react";// Stylesimport "./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:
# npmnpm run start# yarnyarn 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:
# npmnpm i npm-run-all chokidar-cli# yarnyarn add npm-run-all chokidar-cli
npm run all
es un paquete de npm que sirve para correr varios scripts al mismo tiempochokidar-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 👨💻