tui-colors-tw

This is a tailwind plugin that adds a selection of colors.

There are automatic or manual light and dark mode variants.

• CSS Variables --COLOR-XXX, --COLOR-XXX-light, --COLOR-XXX-dark (+ ...-value)
• Tailwind Colors COLOR-XXX, COLOR-XXX-light, COLOR-XXX-dark

How to install

1npm install @timephy/tui-colors-tw

Add it to your tailwind.config.js:

1import tui_colors from "@timephy/tui-colors-tw"
2
3/** @type {import('tailwindcss').Config} */
4module.exports = {
5    ...
6    darkMode: "class", // supports "media" (default) and "class"
7    ...
8    plugins: [
9        tui_colors({}),
10        ...
11    ],
12}

List of colors

1black
2white
3
4primary (black in light mode, white in dark mode)
5secondary (step-700)
6tertiary (step-500)
7
8step-base
9step-000 to step-900
10
11[COLOR-000 to COLOR-250]
12red
13orange
14yellow
15green
16mint
17teal
18cyan
19blue
20indigo
21purple
22pink
23brown
24gray

---

Colors are originally inspired by Apple Design Color.