nexters 5th (5)

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary-green-800: #11373e;
    --primary-green-700: #5e7c75;
    --primary-green-600: #818d8a;

    --primary-yellow-800: #11373e;

    --grey-800: #22211f;
    --grey-700: #5f5d59;
    --grey-600: #807c76;
    --grey-500: #adaaa5;
    --grey-400: #bbbbbb;
    --grey-300: #dfdfdf;
    --grey-200: #efefef;
    --grey-100: #f8f8f8;
    --grey-000: #ffffff;

    --beige-500: #cbc4a8;
    --beige-400: #ded9c6;
    --beige-300: #eae6d7;
    --beige-200: #f6f4e8;
}

tailwind.config.js

module.exports = {
    purge: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
        colors: {
            'primary-green': {
                800: 'var(--primary-green-800)',
                700: 'var(--primary-green-700)',
                600: 'var(--primary-green-600)',
            },
            'primary-yellow': {
                800: 'var(--primary-yellow-800)',
            },
            beige: {
                500: 'var(--beige-500)',
                400: 'var(--beige-400)',
                300: 'var(--beige-300)',
                200: 'var(--beige-200)',
            },
            grey: {
                800: 'var(--grey-800)',
                700: 'var(--grey-700)',
                600: 'var(--grey-600)',
                500: 'var(--grey-500)',
                400: 'var(--grey-400)',
                300: 'var(--grey-300)',
                200: 'var(--grey-200)',
                100: 'var(--grey-100)',
                '000': 'var(--grey-000)',
            },
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
    prefix: 'tw-',
}