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, 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!

https://app.egghead.io/api/v1/lessons/react-configura-los-colores-de-tu-tema-con-tailwindcss-y-variables-css/subtitles

Horacio Herrera: [0:00] Empecemos en el archivo index.css agregando un color personalizado para nuestros temas. Empecemos con theme-light y dentro definiremos color-primary usando variables css y el valor es theme("colors-blue-600"). Hacemos lo mismo para nuestro theme-dark, pero el valor lo cambiamos a 300.

[0:25] Vayamos a tailwind.config.js y extendamos nuestro tema utilizando el color que acabamos de definir. Para ello, en theme extend agregaremos colors y dentro definiremos nuestro color primary con el valor "var(--color-primary)".

[0:45] Por último, vayamos a app.js y agreguemos las clases que acabamos de definir. A este [inaudible] le ponemos className theme-light, y a nuestro h1 le ponemos dar clase text-primary.

[0:59] Con esto podemos abrir nuestra terminal y ejecutar yarn start y ver que nuestro h1 ahora tiene el color azul que es el que hemos definido como text-primary.

[1:10] En resumen, hemos definido nuestro color personalizado color-primary utilizando variables css para cada uno de nuestros temas. Luego, en nuestro tailwind.config.js hemos extendido nuestro tema con el nuevo color que hemos creado asignándole el nombre primary. Esto lo que le dice a tailwind es que cree todas las clases de utilidad de colores con este nuevo valor.

[1:37] Por último, hemos ido a app.js y hemos utilizado la clase text-primary para poder modificar nuestro elemento h1. Vemos aquí que sí cambió a theme-dark. Vamos a cambiar el color a algo más evidente, y vemos que el h1 cambia de color acorde a lo que hemos definido. Si volvemos a cambiar a light, vemos que volvemos a tener el color azul.

Configura los Colores de tu Tema con TailwindCSS y Variables CSS

Share this video with your friends

Course

Crea Temas con TailwindCSS y Variables CSS