tailwind.config.ts

import defaultTheme from "tailwindcss/defaultTheme";
import plugin from "tailwindcss/plugin";
import svgToDataUri from "mini-svg-data-uri";
import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      fontFamily: {
        geist: ["Geist Sans", ...defaultTheme.fontFamily.serif],
      },
      colors: {
        light: {
          1: "#4e4d55",
          2: "#f3f3f3",
        },
        dark: {
          1: "#161618",
          2: "#1c1c1f",
          3: "#47474b",
        },
      },
    },
  },
  plugins: [
    plugin(({ addBase, theme }) => {
      const allColors = flattenColorPalette(theme("colors"));

      const newVars = Object.fromEntries(
        Object.entries(allColors).map(([key, val]) => [
          `--${key}`,
          val as string,
        ]),
      );

      addBase({
        ":root": newVars,
      });
    }),
    plugin(({ matchUtilities, theme }) => {
      matchUtilities(
        {
          "bg-grid": (value) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
            )}")`,
          }),
          "bg-grid-small": (value) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`,
            )}")`,
          }),
          "bg-dot": (value) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`,
            )}")`,
          }),
        },
        {
          values: flattenColorPalette(theme("backgroundColor")),
          type: "color",
        },
      );
    }),
  ],
};