Theming

CSS Variables

<div className='bg-background text-foreground' />

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.

Given the following CSS variables:

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

The background color of the following component will be hsl(var(--primary)) and the foreground color will be hsl(var(--primary-foreground)).

<div className='bg-primary text-primary-foreground'>Hello</div>

List of variables

Here's the list of variables available for customization:

--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;

--border: 214.3 31.8% 91.4%;

--input: 214.3 31.8% 91.4%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;

--ring: 215 20.2% 65.1%;

--radius: 0.5rem;

Adding new colors

To add new colors, you need to add them to styles.css and tailwind.config.js.

:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: 'hsl(var(--warning))',
        'warning-foreground': 'hsl(var(--warning-foreground))',
      },
    },
  },
}

You can now use the warning utility class in your components.

<div className='bg-warning text-warning-foreground' />

Other color formats

We use HSL colors for theming, but other color formats are supported by Tailwind.

See the Tailwind CSS documentation for more information on using rgb, rgba or hsl colors.