Tailwind CSS Integration

Integrate Scale UI Radix with Tailwind CSS makes easier the transition from legacy projects.

Introduction

The integration of Scale UI Radix with Tailwind CSS map the tokens to Tailwind CSS class names, allowing you to use them in your project without effort.To do this you can add the preset in your current configuration that includes all Scale UI Radix colors so you can use them as Tailwind classes in your project.

Configuration

To start just add it like in the example below in your tailwind.config.ts file:

import radixTailwindPreset from '@scale/scaleui-radix/tailwind.config';
import type { Config } from 'tailwindcss';

export default {
  // This is the default configuration for the radix tailwind preset
  presets: [radixTailwindPreset],

  // Customizations specific to this project would go here
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Colors

This integration allows you to use the semantic accent, neutral, warning, success, info and error from Scale UI Radix as Tailwind CSS classes.

Example

<Flex p="5" align="center" className="bg-accent-a5">
  <Button size="3" color="accent">
    Edit profile
  </Button>
</Flex>

In the same way you can use the text-accent-a5 or border-accent-a5, etc. to apply the Scale UI Radix colors to the text or border of an element.

Reference

There is a range of accent colors to choose from, you can click on the color to copy the Tailwind CSS class to your clipboard.

Common issues

Tailwind base styles

As of Tailwind v3, styles produced by the @tailwind directive are usually appended after any imported CSS, no matter the original import order. In particular, Tailwind’s button reset style may interfere with Radix Themes buttons, rendering certain buttons without a background color.

Workarounds:

• Don't use @tailwind base.
• Set up your postcss config file to avoid the collision with Tailwind's base styles. Example setup.

This part of the documentation is still a work in progress. If you have any questions, please ask in the #scaleui-radix-eng channel in Slack.