📄 tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Livewire/**/*.php',
        './app/Filament/**/*.php',
    ],
    theme: {
        extend: {
            colors: {
                // Defined via CSS custom properties (see resources/css/app.css's
                // :root block) rather than fixed hex, so the admin's
                // General Settings > Branding > Brand Color can retint every
                // bg-primary-*/text-primary-*/etc. class at runtime — just by
                // overriding these variables in an inline <style>, no rebuild
                // needed per color change (only this one rebuild, to switch
                // the utility classes over to reading the variables at all).
                // The `<alpha-value>` placeholder is Tailwind's own syntax —
                // it lets opacity modifiers like bg-primary-600/50 keep working.
                primary: {
                    DEFAULT: 'rgb(var(--color-primary-600) / <alpha-value>)',
                    50:  'rgb(var(--color-primary-50) / <alpha-value>)',
                    100: 'rgb(var(--color-primary-100) / <alpha-value>)',
                    200: 'rgb(var(--color-primary-200) / <alpha-value>)',
                    300: 'rgb(var(--color-primary-300) / <alpha-value>)',
                    400: 'rgb(var(--color-primary-400) / <alpha-value>)',
                    500: 'rgb(var(--color-primary-500) / <alpha-value>)',
                    600: 'rgb(var(--color-primary-600) / <alpha-value>)',
                    700: 'rgb(var(--color-primary-700) / <alpha-value>)',
                    800: 'rgb(var(--color-primary-800) / <alpha-value>)',
                    900: 'rgb(var(--color-primary-900) / <alpha-value>)',
                    950: 'rgb(var(--color-primary-950) / <alpha-value>)',
                },
            },
            fontFamily: {
                sans: ['Inter', 'system-ui', 'sans-serif'],
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
};