Getting Started

IMPORTANT

You are reading the documentation of plugin v1, which only supports Tailwind CSS v3 and is NOT compatible with Tailwind CSS v4.

If you are using Tailwind CSS v4, please refer to the latest documentation instead.

Tailwind CSS Radix Colors is a Tailwind CSS plugin that brings Radix UI's color system to Tailwind CSS.

It overrides Tailwind's color palette with Radix's color palette, and provides a bunch of shorthand classes for you to automatically handle dark mode, hover/active states, best foreground color and more, via pre-composed component classes.

Installation

This plugin requires Tailwind CSS version 3 or higher (tailwindcss>=3.0.0).

You can install this plugin with:

npm

npm add -D tailwindcss-radix-colors

yarn

yarn add -D tailwindcss-radix-colors

pnpm

pnpm add -D tailwindcss-radix-colors

bun

bun add -D tailwindcss-radix-colors

Setup

After installation, add this plugin to your Tailwind configuration file:

tailwind.config.ts

import type { Config } from "tailwindcss";
import tailwindcssRadixColors from "tailwindcss-radix-colors";

export default {
  // ... The rest of configuration
  plugins: [tailwindcssRadixColors],
} satisfies Config;

tailwind.config.mjs

import tailwindcssRadixColors from "tailwindcss-radix-colors";

/** @type {import("tailwindcss").Config} */
export default {
  // ... The rest of configuration
  plugins: [tailwindcssRadixColors],
};

tailwind.config.cjs

/** @type {import("tailwindcss").Config} */
module.exports = {
  // ... The rest of configuration
  plugins: [require("tailwindcss-radix-colors")],
};

No additional configuration is required. Tailwind CSS will now use Radix UI's color palette instead of its own.

What's Next?

• To learn how to use this plugin, proceed to Usage.
• To look up the configuration options, check out Options.
• If you are curious about the differences between this plugin and other similar plugins, read Why This Plugin?.