Name: Configura TailwindCSS en tu Create React App
Uploaded: 2020-09-16T17:10:26-05:00
Description: En esta lección, veremos cómo configurar un proyecto de create-react-app desde cero con TailwindCSS. Limpiaremos un poco el proyecto de ficheros que no necesitaremos, y veremos los requisitos mínimos que necesitamos para que nuestra app pueda obtener todos los beneficios de usar TailwindCSS.

Configura TailwindCSS en tu Create React App

Configura los Colores de tu Tema con TailwindCSS y Variables CSS

Crea ThemeContext para acceder al tema de tus Aplicaciones React

Configura TailwindCSS para Producción

Crea Temas con TailwindCSS y Variables CSS

En esta lección, veremos cómo configurar un proyecto de create-react-app desde cero con TailwindCSS. Limpiaremos un poco el proyecto de ficheros que no necesitaremos, y veremos los requisitos mínimos que necesitamos para que nuestra app pueda obtener todos los beneficios de usar TailwindCSS.

https://app.egghead.io/api/v1/lessons/tailwind-configura-tailwindcss-en-tu-create-react-app/subtitles

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.

Configura TailwindCSS en tu Create React App

Share this video with your friends

Course

Crea Temas con TailwindCSS y Variables CSS