tailwindcss-variable-themes plugin

radix colors example

bg-primary-1

bg-primary-2

bg-primary-3

bg-primary-4

bg-primary-5

bg-primary-6

bg-primary-7

bg-primary-8

bg-primary-9

bg-primary-10

bg-primary-11

bg-primary-12

bg-accent-1

bg-accent-2

bg-accent-3

bg-accent-4

bg-accent-5

bg-accent-6

bg-accent-7

bg-accent-8

bg-accent-9

bg-accent-10

bg-accent-11

bg-accent-12

const radixColors = require("@radix-ui/colors");
const { fontFamily } = require("tailwindcss/defaultTheme");
const tailwindThemePlugin = require("tailwindcss-variable-themes");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/radix-colors/*.tsx", "./components/**/*.tsx"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)", ...fontFamily.sans],
      },
    },
  },

  plugins: [
    tailwindThemePlugin({
      varNameMapper: (_, i) => String(i + 1),
      themes: {
        "gray-light": {
          primary: radixColors.gray,
          accent: radixColors.amber,
        },
        "gray-dark": {
          primary: radixColors.grayDark,
          accent: radixColors.amberDark,
        },
        "amber-light": {
          primary: radixColors.amber,
          accent: radixColors.red,
        },
        "amber-dark": {
          primary: radixColors.amberDark,
          accent: radixColors.redDark,
        },
      },
    }),
  ],
};