Default Color
Learn how to customize themes by using Tailwind default colors.
We'll cover the following...
Tailwind has a common set of colors used as a suffix for many utility families, including .text-
, .bg-
, and more. Tailwind provides 22 colors, although only eight are enabled by default. If we want to change that setting, we can reach them via a colors
object:
module.exports = {
theme: {
colors: {
gray: colors.warmGray,
red: colors.red,
green: colors.green,
}
}
}
List of colors
The complete list of colors is in the Tailwind documentation.
While we can completely replace the set of colors in theme#colors
, we are more
likely to want to add our own extra colors in theme#extend#colors
, as shown below:
module.exports = {
theme: {
extend: {
colors: {
"company-orange":
...