tailwind.config.js

const {
  default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,mdx}", // Menjaga semua file sumber
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: '#1F6FEB',       // Deep Blue
        secondary: '#22D1EE',     // Sky Blue
        accent: '#FFD700',        // Gold
        neutralLight: '#F8F9FA',  // Light Grey
        neutralDark: '#212529',   // Very Dark Grey
      },
      fontFamily: {
        poppins: ["Poppins", "sans-serif"],
        sans: ['Inter', 'sans-serif'],
      },
      boxShadow: {
        input: `0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08)`,
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
  plugins: [
    addVariablesForColors,
    require('@tailwindcss/typography'),
  ],
};

// Plugin untuk menambahkan setiap warna Tailwind sebagai variabel CSS global
function addVariablesForColors({ addBase, theme }) {
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [`--${key}`, val]));

  addBase({
    ":root": newVars,
  });
}