Aliases

Tailwind CSS

Adding an alias to your Tailwind config allows you to use semantic names for color utilities.

Tailwind CSS v4

Import one of our pre-defined aliases into your main CSS file. In this example, you apply the name neutral to the slate palette, and primary to the blue palette.

@import '@strum/colors/tailwind.css';
@import '@strum/colors/tailwind/alias-neutral-slate.css';
@import '@strum/colors/tailwind/alias-primary-blue.css';

You can use any color combined with any of the following names:

Tailwind CSS v3

If you’re using a JavaScript config file for Tailwind, you can use our aliasColors helper to create semantic utility classes. In this case, gray is assigned to the slate neutral color, and brand is assigned to the blue accent color.

import strumColors from '@strum/colors/tailwind';
import { aliasColors, AccentColor, NeutralColor } from '@strum/colors';

export default {
  theme: {
    colors: strumColors,
    extend: {
      colors: aliasColors({
        gray: NeutralColor.slate,
        brand: AccentColor.blue,
      }),
    },
  },
};

Vanilla CSS

To alias colors in vanilla CSS, import the colors you need and map them to your own CSS variable names.

@import '@strum/colors/css/blue.css';
@import '@strum/colors/css/green.css';
@import '@strum/colors/css/yellow.css';
@import '@strum/colors/css/red.css';

:root {
  --accent-base: var(--blue-1);
  --accent-bg-subtle: var(--blue-2);
  --accent-bg: var(--blue-3);
  --accent-bg-hover: var(--blue-4);
  --accent-bg-active: var(--blue-5);
  --accent-line: var(--blue-6);
  --accent-border: var(--blue-7);
  --accent-border-hover: var(--blue-8);
  --accent-solid: var(--blue-9);
  --accent-solid-hover: var(--blue-10);
  --accent-text: var(--blue-11);
  --accent-text-contrast: var(--blue-12);

  --success-base: var(--green-1);
  --success-bg-subtle: var(--green-2);
  /* repeat for all steps */

  --warning-base: var(--yellow-1);
  --warning-bg-subtle: var(--yellow-2);
  /* repeat for all steps */

  --danger-base: var(--red-1);
  --danger-bg-subtle: var(--red-2);
  /* repeat for all steps */
}