tailwind.config.js

/** @type {import('tailwindcss').Config} */
const colors = require("./utils/colors");

// Generate a list of all color keys from one of the themes to create the CSS variable mappings in Tailwind. All themes should share the same set of keys.
const colorKeys = Object.keys(colors.themes.default.light);

const tailwindColors = {};
colorKeys.forEach((key) => {
  // Tailwind class e.g. bg-brand-primary-base will use CSS var --brand-primary-base
  tailwindColors[key] = `var(--${key})`;
});

// Optionally, make primitive colors directly available in Tailwind if needed, e.g., bg-neutral-500
const primitiveTailwindColors = {};
for (const colorName in colors.primitives) {
  primitiveTailwindColors[colorName] = colors.primitives[colorName];
}

module.exports = {
  darkMode: "class",
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    "./App.{js,jsx,ts,tsx}",
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        ...tailwindColors,
        ...primitiveTailwindColors,
      },
    },
  },
  plugins: [],
};