Aliasing

Semantic Aliases

It is generally considered a good practice to create semantic names for the colors in your palette when building a website. Not only does this help bring some more meaning to the use of the color, but it also makes it easier to change usage of that color in the future.

To alias a color with windy-radix-palette, there are some helper functions provided that can be accessed via the windy-radix-palette/vars module:

// tailwind.config.js
const { toRadixVar, toRadixVars } = require("windy-radix-palette/vars");

module.exports = {
  theme: {
    extend: {
      colors: {
        'hi-contrast': toRadixVar('slate', 12),

        neutral: toRadixVars('slate'),
        error: toRadixVars('tomato')
      }
    }
  }
};

All that is happening within these functions is mapping to CSS variables. For instance, toRadixVar('slate', 12) returns var(--slate12).

You can see an example of this kind of aliasing in the source for these docs.

Use case aliases

It is possible to alias a single color from a scale, in case you want to give steps of the scale more meaning.

// tailwind.config.js
const { toRadixVar } = require("windy-radix-palette/vars");

module.exports = {
  theme: {
    extend: {
      colors: {
        accentBase: toRadixVar('blue', 1),
        accentBgSubtle: toRadixVar('blue', 2),
        accentBg: toRadixVar('blue', 3),
        accentBgHover: toRadixVar('blue', 4),
        accentBgActive: toRadixVar('blue', 5),
        accentLine: toRadixVar('blue', 6),
        accentBorder: toRadixVar('blue', 7),
        accentBorderHover: toRadixVar('blue', 8),
        accentSolid: toRadixVar('blue', 9),
        accentSolidHover: toRadixVar('blue', 10),
        accentText: toRadixVar('blue', 11),
        accentTextContrast: toRadixVar('blue', 12),

        successBase: toRadixVar('green', 1),
        successBgSubtle: toRadixVar('green', 2),

        warningBase: toRadixVar('yellow', 1),
        warningBgSubtle: toRadixVar('yellow', 2),

        dangerBase: toRadixVar('red', 1),
        dangerBgSubtle: toRadixVar('red', 2),
      }
    }
  }
};

Mutable aliases

When designing for both light and dark mode, you might find that you want to map a variable to one color in light mode, and another color in dark mode.

This isn't currently possible to do entirely in the Tailwind config file, but you can achieve the same result in a couple of different ways:

CSS variables

Create a CSS variable that changes based on your theme:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-app-background: #fff;
  }

  .dark {
    --color-app-background: var(--mauve1);
  }
}

Then reference that variable in your Tailwind config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'app-background': 'var(--color-app-background)',
      }
    }
  }
};

Using dark: prefix

If your use case is a one-off, you can use the dark: prefix from Tailwind. For example, the following code would result in a white background in light mode, and a dark background in dark mode:

<div class="bg-white dark:bg-slate-1">...</div>