Using CSS Variables or your choice of CSS frameworks for theming.
You can choose between using CSS variables or your choice of CSS frameworks utility classes for theming.
Utility classes
To use utility classes for theming set tailwind.cssVariables to false in your components.json file.
or using uno.
CSS Variables
To use CSS variables for theming set tailwind.cssVariables to true in your components.json file.
or using uno.
Convention
We use a simple 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.
The background suffix is omitted when the variable is used for the background color of the component.
Given the following CSS variables:
The background color of the following component will be hsl(var(--primary)) and the foreground color will be hsl(var(--primary-foreground)).
CSS variables must be defined without color space function. See the Tailwind CSS documentation for more information.
List of variables
Here's the list of variables available for customization:
Adding new colors
To add new colors, you need to add them to your CSS file and to your tailwind.config.js file.
or using uno.
You can now use the warning utility class in your components.
Other color formats
I recommend using HSL colors for theming but you can also use other color formats if you prefer.