Setup

Tailwind CSS

Strum works in any styling system, but is designed as a Tailwind-first solution. We offer config for Tailwind v3 and the upcoming Tailwind v4.

Tailwind CSS v4

With Tailwind’s new CSS-based configuration, it’s easy to import Strum and start using it immediately. In your main CSS file, import @strum/colors/tailwind.css after importing Tailwind.

@import 'tailwindcss';
@import '@strum/colors/tailwind.css';

Tailwind CSS v3

To use Strum with previous versions of Tailwind CSS, import @strum/colors/tailwind and apply it to the theme in your Tailwind config JavaScript file.

import strumColors from '@strum/colors/tailwind';

export default {
  theme: {
    colors: strumColors,
  },
};

Using Tailwind Utility Classes

Importing Strum into Tailwind config will replace the built-in color palette with Strum Colors, and you can now access utility classes related to Strum colors.

The color scales automatically invert when you switch between light and dark modes. So you do not need to use the :dark variant when adding color classes unless you want a different scale for each color mode.

export default function MyComponent() {
  return (
    <div className="bg-slate-1 text-blue-11">
      Blue foreground text on a slate background
    </div>
  );
}

Vanilla CSS

To create a palette as CSS variables, import the colors you want.

@import '@strum/colors/css/blue.css';

button {
  background-color: var(--blue-1);
  color: var(--blue-11);
}

Or import all colors at once.

@import '@strum/colors/css/index.css';

body {
  background-color: var(--slate-1);
}

h1 {
  color: var(--blue-11);
}

JavaScript/TypeScript

You can also import the oklch colors or rgb fallback colors as a JavaScript object.

import { oklch, rgb } from '@strum/colors/base';

The objects are exported with TypeScript types that describe the structure as such:

interface Colors {
  crimson: {
    category: 'accent' | 'accentBright' | 'neutral';
    colorName: string;
    dark: {
      0: string;
      // ...contains 0 through 12
    };
    light: {
      0: string;
      // ...contains 0 through 12
    };
  };
}