Getting Started

IMPORTANT

Since v2, this plugin requires tailwindcss >= 4.0.0 and is NOT backward compatible.

If you are not ready to upgrade Tailwind CSS from v3 to v4, please stick with plugin v1.

This plugin brings Radix UI's color system to Tailwind CSS, including color variables and semantic classes that follow Radix's design guidelines.

Installation

npm

npm add tailwindcss-radix-colors

yarn

yarn add tailwindcss-radix-colors

pnpm

pnpm add tailwindcss-radix-colors

bun

bun add tailwindcss-radix-colors

deno

deno add npm:tailwindcss-radix-colors

Configuration

Import this plugin in the same file that imports Tailwind CSS.

@import "tailwindcss";
@import "tailwindcss-radix-colors/dist/all.css"; 

Usually, you will want to use Radix colors exclusively and discard Tailwind colors.

@import "tailwindcss";
@theme {  
  --color-*: initial;  
} 
@import "tailwindcss-radix-colors/dist/all.css";

Please refer to Configuration for more options.

Usage

The imported Radix colors are now available in your application. Note that every color now scales from 1 to 12, instead of 50 to 950 as in Tailwind CSS.

<!-- Basic -->
<div class="bg-blue-1 text-slate-12"></div>
<!-- Dark mode -->
<div class="bg-red-9 dark:bg-reddark-9"></div>
<!-- DCI-P3 color space -->
<div class="bg-greenp3-3"></div>
<!-- Alpha variant -->
<div class="bg-blacka-11"></div>
<!-- Alpha variant in DCI-P3 color space under light/dark mode -->
<div class="border-yellowp3a-6 dark:border-yellowdarkp3a-6"></div>

Besides atomic color classes, we also offer some semantic classes that strictly adhere to Radix's design guidelines. For example, writing bg-red-ui is the same as writing bg-red-3 dark:bg-reddark-3 hover:bg-red-4 dark:hover:bg-reddark-4 active:bg-red-5 dark:active:bg-reddark-5, as per the guideline.

<!-- Another example -->
<div class="bg-teal-ui border-teal-dim text-sage-normal"></div>

Please refer to Semantic Classes for a complete reference.