Tailwind CSS Theme

Learn how to customize the default theme.

The @theme directive of your tailwind.css file is where you define your project's color palette, type scale, fonts, breakpoints, border radius values, and more.

@theme {
  --font-sans: "Graphik", sans-serif;
  --font-serif: "Merriweather", serif;

  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;

  --color-blue-400: oklch(0.707 0.165 254.624);
  --color-purple-400: oklch(0.714 0.203 305.504);
  --color-pink-400: oklch(0.718 0.202 349.761);
  --color-orange-400: oklch(0.75 0.183 55.934);
  --color-yellow-400: oklch(0.852 0.199 91.936);
  --color-gray-400: oklch(0.707 0.022 261.325);

  --radius-4xl: 2rem;
}

Theme structure

The @theme directive contains variables for --breakpoint-*, --color-*, and --spacing-*, as well as a key for each customizable core plugin.

See the theme configuration reference for a complete list of theme options.

Breakpoints

The --breakpoint-* variables allows you to customize the responsive breakpoints in your project.

--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
--breakpoint-xl: 80rem;
--breakpoint-2xl: 96rem;

Colors

The --color-* variables allows you to customize the global color palette for your project.

--color-black: #000;
--color-white: #fff;

--color-gray-50: oklch(0.985 0.002 247.839);
...
--color-gray-950: oklch(0.13 0.028 261.692);

Spacing

The --spacing-* variables allows you to customize the global spacing and sizing scale for your project.

--spacing-px: 1px;
--spacing-0: 0;
...
--spacing-96: 24rem;

Out of the box, your project will automatically inherit the values from Preline UI and Tailwind CSS. If you would like to customize the default theme, you have a few different options depending on your goals.

Extending

If you'd like to preserve the default values for a theme option but also add new values, add your variables in the @theme directive of your configuration file.

For example, if you wanted to add an extra breakpoint but preserve the existing ones, you could extend the --breakpoint-* variable:

--breakpoint-3xl: 100rem;

Overriding

To override a variable in the default theme, add your overrides directly under the @theme directive of your tailwind.css:

--opacity-0: 0;
--opacity-20: 0.2;
--opacity-40: 0.4;
--opacity-60: 0.6;
--opacity-80: 0.8;
--opacity-100: 1;

The official Tailwind CSS Theming documentation helps you to understand the full overview of the theming options.