lucasmotta / windy-radix-palette

Bring Radix Colors to Tailwind CSS

Windy Radix Palette

Brings Radix Colors to Tailwind.

Features an automatic dark mode palette switch based on the presence of the .dark class.

Installation

npm install --save-dev windy-radix-palette @radix-ui/colors

Usage

Add the plugin to your Tailwind config:

module.exports = {
  plugins: [require('windy-radix-palette')],
};

Then you can use the classes in your markup!

<button class="bg-tomato-4 hover:bg-tomato-5 text-tomatoA-11">Button</button>

Options

Colors

By default, this plugin will add CSS properties for all of the available Radix Colors. If you would rather only include the properties for colors that you are actually using, you can pass these as an option to the plugin:

const radixColors = require('@radix-ui/colors');

module.exports = {
  plugins: [
    require('windy-radix-palette')({
      colors: {
        mauveA: radixColors.mauveA,
        mauveDarkA: radixColors.mauveDarkA,
        red: radixColors.red,
        redDark: radixColors.redDark,
      },
    }),
  ],
};

Dark mode

Unlike in the default Tailwind palette, Radix Colors does not share a color palette between light and dark mode. The palettes are designed to be used exclusively in their associated mode.

This package embraces that philosophy by toggling between the palettes based on the presence of a dark class, so you only need to use a single class to support both light and dark mode.

To toggle between light and dark mode, you will need to manually add the dark class to an element. See the Tailwind docs on toggling dark mode manually for more information.

Attributions

Radix UI team for creating this wonderful color palette!