Installation

1pnpm i -D tailwind-easy-theme colord

Usage

1const { Theme } = require('tailwind-easy-theme');
2
3const theme = new Theme({
4  colors: {
5    somecolor: '#e9e6ff',
6    primary: {
7      DEFAULT: '#ffcccc',
8      100: '#ffcccc',
9      200: '#ff9999',
10      300: '#ff6666',
11      400: '#ff3333',
12    },
13  },
14});
15
16const darkMode = theme.variant(
17  {
18    colors: {
19      primary: {
20        DEFAULT: '#0f172a',
21        400: '#475569',
22        300: '#334155',
23        200: '#1e293b',
24        100: '#0f172a',
25      },
26    },
27  },
28  {
29    mediaQuery: '@media (prefers-color-scheme: dark)',
30  }
31);
32
33const coolTheme = theme.variant(
34  {
35    colors: {
36      somecolor: '#555',
37    },
38  },
39  {
40    selector: '[data-theme="cool-theme"]',
41  }
42);
43
44/** @type {import('tailwindcss').Config} */
45module.exports = {
46  content: [],
47  theme: {
48    extend: {},
49  },
50  plugins: [
51    theme.create({
52      '[data-theme="dark"]': darkMode,
53    }),
54  ],
55};

This config create the tailwind classes and generate the necessary css and inject it. The color is converted to hsl values, so that opacity works as expected.

Generated CSS for this example:

1:root {
2  --color-somecolor: 247 100% 95%;
3  --color-primary: 0 100% 90%;
4  --color-primary-100: 0 100% 90%;
5  --color-primary-200: 0 100% 80%;
6  --color-primary-300: 0 100% 70%;
7  --color-primary-400: 0 100% 60%;
8}
9
10@media (prefers-color-scheme: dark) {
11  :root {
12    --color-primary: 222 47% 11%;
13    --color-primary-100: 222 47% 11%;
14    --color-primary-200: 217 33% 17%;
15    --color-primary-300: 215 25% 27%;
16    --color-primary-400: 215 19% 35%;
17  }
18}
19
20[data-theme='cool-theme'] {
21  --color-somecolor: 0 0% 33%;
22}
23
24[data-theme='dark'] {
25  --color-primary: 222 47% 11%;
26  --color-primary-100: 222 47% 11%;
27  --color-primary-200: 217 33% 17%;
28  --color-primary-300: 215 25% 27%;
29  --color-primary-400: 215 19% 35%;
30}

The hex value is given as the fallback value to the tailwind variable config. This means the vscode autocomplete shows the color correctly, despite being a css variable!

Options

1export type Options = {
2  /** The prefix added to the key of a color. Defaults to `--color-` */
3  prefix?: string;
4  /** The selector to add the css variables to. Defaults to `:root` */
5  selector?: string;
6};

1type VariantOptions = {
2  /** The selector to add the css variables to. If not specified will use main theme's selector. */
3  selector?: string;
4  /** @example `@media (prefers-color-scheme: dark)` */
5  mediaQuery?: string;
6};