Defining Tailwind Colors
In tailwind, you can define colors in the
./tailwind.config.js file. When using this file, you have the option to override all of tailwind’s default colors, or you may extend these colors with your own. As an example, we extended tailwind’s base colors with 9 shades of each of the following three colors:
We created our shades of the above colors with a nice little utility called Color Shades Generator for Tailwind CSS.
Once you define a color for Tailwind, that color is available in most classes that colors are used, i.e.
You can read more about customizing Tailwind CSS colors in their documentation here.
Change Color Scheme
Most websites however are going to key off the colors for the brand being represented. Following industry best practices, there are typically three colors selected for the website main colors: primary, secondary, and tertiary.
So as an alternative method, we defined these within the
./src/css/custom-base-styles/colors.css file as variables. Updating these CSS variable color definitions using HEX or RGB colors will change usage of these throughout the entire theme.
If you change these colors and do not have
gulp watch running, don’t forget to run
gulp build to rebuild the style.css file, to reflect your changes.