Windy-radix-palette NPM

Windy Radix Palette

Tailwind preset for bringing Radix Colors palette to Tailwind.

Usage

Install the preset from npm. You will also need postcss-import or an equivalent way to import this preset's base styles into your CSS:

npm install --save-dev windy-radix-palette postcss-import

1. Preset

Add the preset to your tailwind.config.js:

module.exports = {
  presets: [require('windy-radix-palette')],
  // your config here...
};

Note that adding the preset will add all Radix colors to your Tailwind config. This won't stop Tailwind from purging unused colors, but if you don't include all colors via CSS, then it might cause Tailwind Intellisense to think that some colors are available when they actually aren't.

If you want to add only a subset of the colors, you can do so by explicity importing and adding the colors. Not using the preset also means that you have to set the dark mode strategy manually if you plan to use dark mode:

const colors = require('windy-radix-palette/colors');

module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        red: colors.red,
        blueA: colors.blueA,
      },
    },
  },
};

2. CSS base styles

Add postcss-import to your postcss.config.js:

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Import the base styles in your css. You have a choice of importing all colors, or just the ones that you want to use. If you import all colors, then their CSS variables will not be removed from the output CSS, since Tailwind does not purge unused CSS variables.

Importing all colors:

@import 'tailwindcss/base';
@import 'windy-radix-palette/base.css';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

Importing a subset of colors. Note that you need to import the dark styles separately if you intend to use them:

@import 'tailwindcss/base';
@import 'windy-radix-palette/blue.css';
@import 'windy-radix-palette/blueDark.css';
@import 'windy-radix-palette/redA.css';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

See the Tailwind docs for more information about build-time imports.

Now the colors will become available for use with Tailwind utilities:

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

Dark mode

Class strategy

Currently, this preset works best when the Tailwind dark mode strategy is set to class. If you don't specify a dark mode strategy in your Tailwind config, then the preset will set it to class.

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.

Media strategy

Whilst it is possible to use this preset with the media strategy, it isn't fully supported at this time. You will still need to manually add the dark class to an element in order for the dark mode palette to be applied.

How does it work?

This package uses the Radix Colors palette to generate a Tailwind preset and a set of CSS files. The Radix Colors CSS files are modified so that the dark palette is more compatible with Tailwind when using the class dark mode strategy.