At the end of this tutorial, you will be able to change the base colors of your application
globals.css
apps/web/styles
, you will have a globals.css
with the following value:
hsl
values. This allows us to change saturation, brightness without having to make changes to the hex code or mapping different levels of saturation in tailwind.config.ts
file.
background
and foreground
convention for colors. The background
variable is used for the background color of the component and the foreground
variable is used for the text color.
background
suffix is omitted when the variable is used for the background color of the component.hsl(var(--primary))
and the foreground color will be hsl(var(--primary-foreground))
.
globals.css
and to your packages/tailwind-config/tailwind.config.ts
file.
warning
utility class in your components: