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

En esta lección, aprenderás a cómo configurar TailwindCSS para que cree clases personalizadas para los colores de tu app, usando Variables CSS.

Estamos usando Variables CSS porque es una de las formas de obtener diferentes valores de colores asignadas a la misma clase de utilidad creada por TailwindCSS, de esta manera no importa que tema estemos asignando, los colores que aplicaremos serán acordes a el tema que hayamos escogido en nuestras aplicaciones.

También usaremos la función `theme`, que nos deja obtener cualquier valor del tema de tailwind en nuestro código y usarlo para darle valor a nuestra variable CSS. Ésta function viene accesible por defecto con Tailwind!

Configura los Colores de tu Tema con TailwindCSS y Variables CSS

En ésta lección, vamos a create un Contexto personalizado para nuestro tema llamado `ThemeContext`. Usando el contexto de React para nuestro tema, es una manera limpia y simple de compartir éste valor y hacerlo muy accesible para cualquier componente de nuestra App. Aprenderemos también a cómo crear un hook personalizado para acceder a el valor de nuestro ThemeContext.

Crea ThemeContext para acceder al tema de tus Aplicaciones React

En este vídeo aprenderemos los requisitos necesarios para obtener sólo las clases que usas en tu aplicación generadas por TailwindCSS. Esto es importante ya que no queremos que nuestros usuarios se descarguen estilos que no son necesarios.

Por suerte para nosotros, en la version de Tailwind usada en este tutorial (1.9.x) viene integrado una panera de "purgar" (purge) todas las utilidades de clase que no usamos. para ello modificaremos la propiedad "purge" de nuestro archivo `tailwind.config.js`. También debemos cambiar el valor de la variable `NODE_ENV` a `production`, para que la CLI de Tailwind ejecute el proceso de build optimizando el resultado.

Crea Temas con TailwindCSS y Variables CSS

Instructor

Course Content