Tailwind colours

Default colours

In the default theme.css file, Tailwind defines a number of colours. Each colour has 9 stops (shades) with 50 being the lightest and 950 being the darkest.

For example, the orange colour has these shades:

--color-orange-50: oklch(98% 0.016 73.684);
--color-orange-100: oklch(95.4% 0.038 75.164);
--color-orange-200: oklch(90.1% 0.076 70.697);
--color-orange-300: oklch(83.7% 0.128 66.29);
--color-orange-400: oklch(75% 0.183 55.934);
--color-orange-500: oklch(70.5% 0.213 47.604);
--color-orange-600: oklch(64.6% 0.222 41.116);
--color-orange-700: oklch(55.3% 0.195 38.402);
--color-orange-800: oklch(47% 0.157 37.304);
--color-orange-900: oklch(40.8% 0.123 38.172);
--color-orange-950: oklch(26.6% 0.079 36.259);

Colours are also exposed as CSS variables so you can reference them in CSS with something like var(--color-red-500).

How to add custom colours

To add custom colours, add theme variables in the --color-* namespace like so:

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}