package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/typography": "^0.5.9",
        "autoprefixer": "10.4.2",
        "laravel-vite-plugin": "0.7.5",
        "postcss": "8.4.6",
        "tailwindcss": "3.1.0",
        "vite": "^4.3.9"
    },
    "dependencies": {
        "@alpinejs/collapse": "^3.12.2",
        "@alpinejs/mask": "^3.12.2",
        "alpinejs": "^3.12.2",
        "axios": "^1.4.0"
    }
}

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

tailwind.config.js

import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @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',
    ],

    theme: {
        extend: {
            fontFamily: {
                satoshi: ['Satoshi', 'sans-serif']
            },
            backgroundImage: {
                pattern: 'url(/public/images/pattern.svg)'
            },
            colors: {
                primary: '#FFB727',
                secondary: '#000C2C',
                amber: {
                    200: '#FDE68A'
                },
                blue: {
                    700: '#1D4ED8'
                },
                emerald: {
                    400: '#34D399'
                },
                gray: {
                    100: '#F3F4F6',
                    200: '#E5E7EB',
                    300: '#D1D5DB',
                    600: '#4B5563'
                },
                indigo: {
                    400: '#818CF8'
                },
                neutral: {
                    200: '#E5E7EB',
                    500: '#737373',
                    600: '#4B5563',
                    800: '#262626',
                },
                orange: {
                    50: '#FFF7ED'
                },
                red: {
                    500: '#EF4444',
                    800: '#991B1B'
                },
                rose: {
                    300: '#FDA4AF'
                },
                sky: {
                    400: '#38BDF8',
                    600: '#0284C7'
                },
                zinc: {
                    400: '#A1A1AA',
                    600: '#52525B',
                    700: '#3F3F46',
                    900: '#18181B'
                }
            },
            boxShadow: {
                md: '0px 4px 16px rgba(0, 0, 0, 0.12)'
            },
            spacing: {
                18: '4.5rem'
            }
        },
    },

    plugins: [forms, typography],
};