tailwindcss-uswds-colors

This package provides the colors from the U.S. Web Design System (USWDS) in a format that can be easily used with Tailwind CSS.

The USWDS color palette includes 47 hues, each with 9-10 shades, for a total of 461 unique colors. The colors have a unique property in that the difference between the numeric value of the shade of any two colors can be used to determine the contrast ratio between the two colors, making it easy to generate accessible user interfaces. More information.

This package provides two versions of the colors:

1. The default version uses the shade names exactly as the USWDS uses, from 5 to 90.
2. A 10x scaled up version which matches Tailwind's default color scale, from 50 to 900.

Usage

Install the package:

$ pnpm add tailwindcss-uswds-colors

Import the colors (tailwind.config.js):

// Shades 5-90:
import colors from 'tailwindcss-uswds-colors'

// Or: Shades 50-900:
import colors from 'tailwindcss-uswds-colors/10'

Either replace the default color palette completely:

// ... import ...

export default {
  theme: {
    colors
  }
}

or extend the default color palette:

// ... import ...

export default {
  theme: {
    extend: {
      colors
    }
  }
}

or pick colors to add/replace:

// ... import ...

export default {
  theme: {
    extend: {
      colors: {
        orange: colors['orange-vivid'],
      }
    }
  }
}

License

CC0 1.0, same as the USWDS colors.