Configura TailwindCSS en tu Create React App

Horacio Herrera: [0:00] Creamos un proyecto con create-react-app desde cero. Hagamos npx create-react-app theming-with-tailwind. Una vez ha terminado, podemos entrar en nuestro proyecto y pasamos a instalar Tailwind con el comando yarn add tailwindcss.

[0:22] Cuando ya esté instalado podemos inicializar Tailwind con el comando tailwind init. Este comando nos va a crear el fichero tailwind.config.js, el cual lo vamos a necesitar para poder configurar nuestro tema.

[0:39] Ahora podemos pasar a ejecutar el proyecto con yarn start, y aquí podemos ver el proyecto. Ahí vamos a empezar a limpiar un poco de código. Borramos App.css. Borramos App.test.js. Borramos logo.svg.

[0:56] Ahora vamos a App.css, y borramos estos dos imports del logo. Del App.css borramos también todo el contenido de App y simplemente devolvemos un div con un h1 que diga Hello World. Al guardar vemos que se pinta el Hello World en nuestro navegador.

[1:15] Ahora pasamos al index.css. Al inicio de todo incluiremos @tailwind base, @tailwind components, y @tailwind utilities. Estas tres líneas son necesarias para que tailwind funcione correctamente, tanto en modo de desarrollo como en modo de producción.

[1:34] Ahora vayamos al fichero package.json, y agreguemos tres scripts más que vamos a necesitar. El primero se va a llamar build:tailwind que es el que va a compilar todo nuestro css con tailwind. Hacemos tailwindcss build. Tenemos que marcarle el punto de entrada que será src/index.css y también tenemos que marcarle el output, o el punto de salida, que va a ser src/output.css.

[2:04] Vamos a hacer un wrap aquí del texto, así podemos verlo todo.

[2:08] También vamos a agregar el script prestart que va a llamar a yarn build:tailwind y prebuild que va a hacer lo mismo. Estos scripts son necesarios porque la compilación de nuestro css será un proceso aparte al de la compilación de nuestra aplicación.

En build: [2:29] Tailwind estamos diciendo a la línea comando de tailwind que genere el css necesario para nuestra aplicación y cree el archivo output.css con él.

[2:39] Tanto el script prestart como el script prebuild son scripts que se van a ejecutar antes del script padre. Antes de start se va a ejecutar prestart y antes de build se va a ejecutar prebuild. Esto es una propiedad de npm, la cual nos ayuda mucho en este flujo de trabajo.

[2:58] Como vemos, se va a generar ahora un fichero llamado output.css, el cual tenemos que invocar dentro de nuestra aplicación. Para ello, vamos a cambiar en el archivo index.js el import a index.css por un import a output.css.

[3:15] Una vez tengamos esto, vemos que nos sale el error que no encuentra el archivo output.css, y es porque no se ha generado aún ese fichero. Para poder generarlo vamos a parar nuestro servidor, y vamos a volver a ejecutar yarn start. Esto nos devuelve un resultado diferente al que teníamos anteriormente.

[3:33] Para poder ver realmente que estamos utilizando Tailwind, si agregamos text-red-500, que es una clase especial de Tailwind, vemos que nuestro título cambia de color rojo.