Windy Radix Palette

Bring Radix Colors to Tailwind CSS

TailwindCSSColorsTypography
brattonross/windy-radix-palettewindy-radix-palette.vercel.appwindy-radix-palette

README

Windy Radix Palette


Installation


  1. ```bash
  2. npm install --save-dev windy-radix-palette @radix-ui/colors
  3. ```

Usage


Add the plugin to your Tailwind config:

  1. ```js
  2. module.exports = {
  3. plugins: [require("windy-radix-palette")],
  4. };
  5. ```

Then you can use the classes in your markup!

  1. ```html
  2. <button class="bg-tomato-4 hover:bg-tomato-5 text-tomatoA-11">Button</button>
  3. ```

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:

  1. ```js
  2. const radixColors = require("@radix-ui/colors");

  4. module.exports = {
  5. plugins: [
  6.   require("windy-radix-palette")({
  7.    colors: {
  8.     mauveA: radixColors.mauveA,
  9.     mauveDarkA: radixColors.mauveDarkA,
  10.     red: radixColors.red,
  11.     redDark: radixColors.redDark,
  12.    },
  13.   }),
  14. ],
  15. };
  16. ```

Root Selector


By default, this plugin will add CSS properties to the :root CSS pseudo-class. The selector where these properties are placed can be customized via therootSelector option. For example, when working with shadow DOM you might want to put the properties under the :host selector:

  1. ```js
  2. module.exports = {
  3. plugins: [
  4.   require("windy-radix-palette")({
  5.     rootSelector: ":host",
  6.    },
  7.   }),
  8. ],
  9. };
  10. ```

Dark mode


Thanks to the design of the Radix Colors palettes, you don't actually need to do anything to make dark mode work! The colors in this palette will automatically switch to the light/dark variant based on your Tailwind dark mode settings:

- When darkMode is not set, or is set to 'media', the palette will change based on the user's preferred color scheme ([prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme))
- When darkMode is set to 'class', the palette will change based on the presence of the dark mode selector (defaults to .dark), note that you can customize the dark mode selector if required

Unlike the default Tailwind palette, Radix Colors come in light and dark variants, and the palettes are meant to be used only in light and dark mode respectively (in order to meet WCAG color contrast guidelines). This means that you don't need to prefix any of your classes with dark:—the palettes are designed to _just work_ when switching between light and dark mode.

Typography


The typography plugin creates a set of themes for Tailwind Typography, based on the Radix Colors gray scales.

Installation


  1. ```bash
  2. npm install --save-dev windy-radix-typography @tailwindcss/typography
  3. ```

Usage


Add it to your Tailwind config:

  1. ```js
  2. module.exports = {
  3. plugins: [
  4.   require("windy-radix-palette"),
  5.   require("@tailwindcss/typography"),
  6.   require("windy-radix-typography"),
  7. ],
  8. };
  9. ```

Now you can use the prose themes in your markup:

  1. ```html
  2. <div class="prose prose-mauve">...</div>
  3. ```

Check out the docs and demo here.

Attributions


- Radix UI team for creating these wonderful color palettes