Configuration
Updating Color #
// tailwind.config.js
...
theme: {
extend: {
colors: {
primary: {
light: "#fefcbf", // For lighter primary color
DEFAULT: "#b7791f", // Normal primary color
dark: "#744210", // Used for hover, active, etc.
},
},
},
},
...
Primary Color Palette #
Hello
Hello
Hello
<div class="grid max-w-xs grid-cols-2 gap-2">
<div class="w-full h-10 bg-primary-light"></div>
<div class="border border-primary-light text-primary-light">Hello</div>
<div class="w-full h-10 bg-primary"></div>
<div class="border border-primary text-primary">Hello</div>
<div class="w-full h-10 bg-primary-dark"></div>
<div class="border border-primary-dark text-primary-dark">Hello</div>
</div>