radix-ui-themes-with-tailwind

npm version

Introduction

Designed to simplify your web development experience by seamlessly integrating Radix UI Themes with the class-based utility system of Tailwind CSS. This plugin empowers you to effortlessly combine the strengths of both technologies for efficient and elegant web application development.

Is This Plugin Necessary for Using Radix Themes?

No, the plugin is not mandatory. But, if you're accustomed to Tailwind and prefer not to use Radix Themes' layout utilities (such as <Flex />, <Grid />), this plugin is for you! With this plugin you can still develop using Tailwind classes (e.g., className="flex items-center gap-2").

Key Benefits

Tailwind CSS Efficiency

Tailwind CSS is known for its straightforward class-based approach, making it easier for developers to style their projects. It offers flexibility and speed by allowing you to apply styles directly in your HTML.

Radix UI Themes Elegance

Radix UI Themes provides a curated set of pre-designed components that are ready for production. This means you can create polished user interfaces without starting from scratch.

Perfect Integration

Our plugin bridges the gap between Tailwind CSS and Radix UI Themes, offering a cohesive development experience. It eliminates the need for complex workarounds, helping you achieve both functionality and aesthetics.

Usage

To get started, install the plugin using your preferred package manager.
pnpm install radix-ui-themes-with-tailwind -D
# or
npm install radix-ui-themes-with-tailwind -D
# or
yarn install radix-ui-themes-with-tailwind -D
Then, add the plugin to your Tailwind config file.
import type { Config } from "tailwindcss";


import { radixThemePlugin } from "radix-ui-themes-with-tailwind";


const config: Config = {
  content: [
    // ...
  ],
  theme: {},
  plugins: [

    radixThemePlugin({

      useTailwindColorNames: true,

      useTailwindRadiusNames: true,

      mapMissingTailwindColors: true,

    }),

  ],
};
export default config;

Examples

Radix UI Themes Layout

<Flex gap="3">
  <Box width="9" height="9">
    <DecorativeBox />
  </Box>
  <Box width="9" height="9">
    <DecorativeBox />
  </Box>
  <Box width="9" height="9">
    <DecorativeBox />
  </Box>
  <Box width="9" height="9">
    <DecorativeBox />
  </Box>
  <Box width="9" height="9">
    <DecorativeBox />
  </Box>
</Flex>

With Tailwind CSS

<div className="flex gap-3">
  <div className="w-16 h-16">
    <DecorativeBox />
  </div>
  <div className="w-16 h-16">
    <DecorativeBox />
  </div>
  <div className="w-16 h-16">
    <DecorativeBox />
  </div>
  <div className="w-16 h-16">
    <DecorativeBox />
  </div>
  <div className="w-16 h-16">
    <DecorativeBox />
  </div>
</div>

Why 16 instead of 9? Because when mapping the spacing of radix to tailwind, I found that radix's spacing scale is very limited, and tailwind's spacing scale is much better. So I ported tailwind spacing scale with radix scaling factor. You can see the mapping in the source code

Radix UI Themes Typography

<Text as="p">
  The <Em>most</Em> important thing to remember is,{" "}
  <Strong>stay positive</Strong>.
</Text>
<Text size="4" as="p">
  The <Em>most</Em> important thing to remember is,{" "}
  <Strong>stay positive</Strong>.
</Text>
<Heading size="4">Typographic principles</Heading>
<Heading size="5">Typographic principles</Heading>
<Heading size="6">Typographic principles</Heading>
<Heading size="7">Typographic principles</Heading>
<Heading size="8">Typographic principles</Heading>
<Heading size="9">Typographic principles</Heading>

The most important thing to remember is, stay positive.

The most important thing to remember is, stay positive.

Typographic principles

Typographic principles

Typographic principles

Typographic principles

Typographic principles

Typographic principles

With Tailwind CSS

<p>
  The <em>most</em> important thing to remember is,{" "}
  <strong>stay positive</strong>.
</p>
<p className="text-lg">
  The <em>most</em> important thing to remember is,{" "}
  <strong>stay positive</strong>.
</p>
<h6>Typographic principles</h6>
<h5>Typographic principles</h5>
<h4>Typographic principles</h4>
<h3>Typographic principles</h3>
<h2>Typographic principles</h2>
<h1>Typographic principles</h1>

The most important thing to remember is, stay positive.

The most important thing to remember is, stay positive.

Typographic principles
Typographic principles

Typographic principles

Typographic principles

Typographic principles

Typographic principles

Using Radix colors with Tailwind

tomato
25
tomato-1
50
tomato-2
100
tomato-3
200
tomato-4
300
tomato-5
400
tomato-6
500
tomato-7
600
tomato-8
700
tomato-9
800
tomato-10
900
tomato-11
950
tomato-12
red
25
red-1
50
red-2
100
red-3
200
red-4
300
red-5
400
red-6
500
red-7
600
red-8
700
red-9
800
red-10
900
red-11
950
red-12
ruby
25
ruby-1
50
ruby-2
100
ruby-3
200
ruby-4
300
ruby-5
400
ruby-6
500
ruby-7
600
ruby-8
700
ruby-9
800
ruby-10
900
ruby-11
950
ruby-12
crimson
25
crimson-1
50
crimson-2
100
crimson-3
200
crimson-4
300
crimson-5
400
crimson-6
500
crimson-7
600
crimson-8
700
crimson-9
800
crimson-10
900
crimson-11
950
crimson-12
pink
25
pink-1
50
pink-2
100
pink-3
200
pink-4
300
pink-5
400
pink-6
500
pink-7
600
pink-8
700
pink-9
800
pink-10
900
pink-11
950
pink-12
plum
25
plum-1
50
plum-2
100
plum-3
200
plum-4
300
plum-5
400
plum-6
500
plum-7
600
plum-8
700
plum-9
800
plum-10
900
plum-11
950
plum-12
purple
25
purple-1
50
purple-2
100
purple-3
200
purple-4
300
purple-5
400
purple-6
500
purple-7
600
purple-8
700
purple-9
800
purple-10
900
purple-11
950
purple-12
violet
25
violet-1
50
violet-2
100
violet-3
200
violet-4
300
violet-5
400
violet-6
500
violet-7
600
violet-8
700
violet-9
800
violet-10
900
violet-11
950
violet-12
iris
25
iris-1
50
iris-2
100
iris-3
200
iris-4
300
iris-5
400
iris-6
500
iris-7
600
iris-8
700
iris-9
800
iris-10
900
iris-11
950
iris-12
indigo
25
indigo-1
50
indigo-2
100
indigo-3
200
indigo-4
300
indigo-5
400
indigo-6
500
indigo-7
600
indigo-8
700
indigo-9
800
indigo-10
900
indigo-11
950
indigo-12
blue
25
blue-1
50
blue-2
100
blue-3
200
blue-4
300
blue-5
400
blue-6
500
blue-7
600
blue-8
700
blue-9
800
blue-10
900
blue-11
950
blue-12
cyan
25
cyan-1
50
cyan-2
100
cyan-3
200
cyan-4
300
cyan-5
400
cyan-6
500
cyan-7
600
cyan-8
700
cyan-9
800
cyan-10
900
cyan-11
950
cyan-12
teal
25
teal-1
50
teal-2
100
teal-3
200
teal-4
300
teal-5
400
teal-6
500
teal-7
600
teal-8
700
teal-9
800
teal-10
900
teal-11
950
teal-12
jade
25
jade-1
50
jade-2
100
jade-3
200
jade-4
300
jade-5
400
jade-6
500
jade-7
600
jade-8
700
jade-9
800
jade-10
900
jade-11
950
jade-12
green
25
green-1
50
green-2
100
green-3
200
green-4
300
green-5
400
green-6
500
green-7
600
green-8
700
green-9
800
green-10
900
green-11
950
green-12
grass
25
grass-1
50
grass-2
100
grass-3
200
grass-4
300
grass-5
400
grass-6
500
grass-7
600
grass-8
700
grass-9
800
grass-10
900
grass-11
950
grass-12
brown
25
brown-1
50
brown-2
100
brown-3
200
brown-4
300
brown-5
400
brown-6
500
brown-7
600
brown-8
700
brown-9
800
brown-10
900
brown-11
950
brown-12
orange
25
orange-1
50
orange-2
100
orange-3
200
orange-4
300
orange-5
400
orange-6
500
orange-7
600
orange-8
700
orange-9
800
orange-10
900
orange-11
950
orange-12
sky
25
sky-1
50
sky-2
100
sky-3
200
sky-4
300
sky-5
400
sky-6
500
sky-7
600
sky-8
700
sky-9
800
sky-10
900
sky-11
950
sky-12
mint
25
mint-1
50
mint-2
100
mint-3
200
mint-4
300
mint-5
400
mint-6
500
mint-7
600
mint-8
700
mint-9
800
mint-10
900
mint-11
950
mint-12
lime
25
lime-1
50
lime-2
100
lime-3
200
lime-4
300
lime-5
400
lime-6
500
lime-7
600
lime-8
700
lime-9
800
lime-10
900
lime-11
950
lime-12
yellow
25
yellow-1
50
yellow-2
100
yellow-3
200
yellow-4
300
yellow-5
400
yellow-6
500
yellow-7
600
yellow-8
700
yellow-9
800
yellow-10
900
yellow-11
950
yellow-12
amber
25
amber-1
50
amber-2
100
amber-3
200
amber-4
300
amber-5
400
amber-6
500
amber-7
600
amber-8
700
amber-9
800
amber-10
900
amber-11
950
amber-12
gold
25
gold-1
50
gold-2
100
gold-3
200
gold-4
300
gold-5
400
gold-6
500
gold-7
600
gold-8
700
gold-9
800
gold-10
900
gold-11
950
gold-12
bronze
25
bronze-1
50
bronze-2
100
bronze-3
200
bronze-4
300
bronze-5
400
bronze-6
500
bronze-7
600
bronze-8
700
bronze-9
800
bronze-10
900
bronze-11
950
bronze-12
gray
25
gray-1
50
gray-2
100
gray-3
200
gray-4
300
gray-5
400
gray-6
500
gray-7
600
gray-8
700
gray-9
800
gray-10
900
gray-11
950
gray-12
mauve
25
mauve-1
50
mauve-2
100
mauve-3
200
mauve-4
300
mauve-5
400
mauve-6
500
mauve-7
600
mauve-8
700
mauve-9
800
mauve-10
900
mauve-11
950
mauve-12
slate
25
slate-1
50
slate-2
100
slate-3
200
slate-4
300
slate-5
400
slate-6
500
slate-7
600
slate-8
700
slate-9
800
slate-10
900
slate-11
950
slate-12
sage
25
sage-1
50
sage-2
100
sage-3
200
sage-4
300
sage-5
400
sage-6
500
sage-7
600
sage-8
700
sage-9
800
sage-10
900
sage-11
950
sage-12
olive
25
olive-1
50
olive-2
100
olive-3
200
olive-4
300
olive-5
400
olive-6
500
olive-7
600
olive-8
700
olive-9
800
olive-10
900
olive-11
950
olive-12
sand
25
sand-1
50
sand-2
100
sand-3
200
sand-4
300
sand-5
400
sand-6
500
sand-7
600
sand-8
700
sand-9
800
sand-10
900
sand-11
950
sand-12
zinc
25
sand-1
50
sand-2
100
sand-3
200
sand-4
300
sand-5
400
sand-6
500
sand-7
600
sand-8
700
sand-9
800
sand-10
900
sand-11
950
sand-12
neutral
25
sage-1
50
sage-2
100
sage-3
200
sage-4
300
sage-5
400
sage-6
500
sage-7
600
sage-8
700
sage-9
800
sage-10
900
sage-11
950
sage-12
stone
25
mauve-1
50
mauve-2
100
mauve-3
200
mauve-4
300
mauve-5
400
mauve-6
500
mauve-7
600
mauve-8
700
mauve-9
800
mauve-10
900
mauve-11
950
mauve-12
emerald
25
grass-1
50
grass-2
100
grass-3
200
grass-4
300
grass-5
400
grass-6
500
grass-7
600
grass-8
700
grass-9
800
grass-10
900
grass-11
950
grass-12
fuchsia
25
plum-1
50
plum-2
100
plum-3
200
plum-4
300
plum-5
400
plum-6
500
plum-7
600
plum-8
700
plum-9
800
plum-10
900
plum-11
950
plum-12
rose
25
crimson-1
50
crimson-2
100
crimson-3
200
crimson-4
300
crimson-5
400
crimson-6
500
crimson-7
600
crimson-8
700
crimson-9
800
crimson-10
900
crimson-11
950
crimson-12