You can choose between using CSS variables (recommended) or utility classes for theming.
CSS Variables
TailwindCSS v4 Configuration
Copy and paste the following into your src/styles.css file:
Update your src/app/app.config.ts file in case CLI did not modify it:
Utility classes
Convention
We use a simple background and foreground convention for colors. The background variable is used for the component background and the foreground variable is used for the text color.
Background and foreground
backgroundComponent background color
foregroundComponent text color
Given the following OKLCH variables:
The primary variable is the background color and the primary-foreground variable is the text color.
Note: The background suffix is omitted when the variable is used for the background color of the component.
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 using the TailwindCSS v4 @theme directive.
Base Colors
For reference, here's a list of the base colors that are available.