Configura los Colores de tu Tema con TailwindCSS y Variables CSS

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.