tailwind palette plugin

page.tsx

interface PaletteExampleProps {
  palette: "light" | "dark";
}

const PaletteExample = (props: PaletteExampleProps) => {
  return (
    <div
      className={`palette-${props.palette} bg-palette-paper text-palette-ink p-10`}
    >
      Palette {props.palette}
    </div>
  );
};

export default async function Home() {
  return (
    <>
      <h1>Palette Example</h1>
      <PaletteExample palette="light" />
      <PaletteExample palette="dark" />
    </>
  );
}

palette-plugin.ts

import { PluginAPI, PluginCreator } from "tailwindcss/types/config";

export const palettePlugin: PluginCreator = (api: PluginAPI) => {
  const palettes = Object.keys(api.theme("palettes"));

  for (const palette of palettes) {
    api.addUtilities({
      [`.palette-${palette}`]: {},
    });

    const colors = api.theme(`palettes.${palette}`)!;

    const styles = [
      { class: "bg", property: "backgroundColor" },
      { class: "text", property: "color" },
    ];

    for (const color of Object.keys(colors)) {
      for (const style of styles) {
        api.addUtilities({
          [`.palette-${palette}.${style.class}-palette-${color}`]: {
            [style.property]: colors[color],
          },
        });
      }
    }
  }
};

tailwind.config.ts

import type { Config } from "tailwindcss";
import { palettePlugin } from "./palette-plugin";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    palettes: {
      light: {
        paper: "white",
        ink: "black",
      },
      dark: {
        paper: "black",
        ink: "white",
      },
    },
  },
  plugins: [palettePlugin],
};

export default config;