tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    theme: {
        typography: {
            default: {
                css: {
                    color: '#333',
                    a: {
                        color: '#5850ec',
                        '&:hover': {
                            color: '#7f78f5',
                        },
                    },
                },
            },
        },
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {},
    purge: {
        content: [
            './app/**/*.php',
            './resources/**/*.html',
            './resources/**/*.js',
            './resources/**/*.jsx',
            './resources/**/*.ts',
            './resources/**/*.tsx',
            './resources/**/*.php',
            './resources/**/*.vue',
            './resources/**/*.twig',
            './storage/framework/views/*.php',
            './resources/views/**/*.blade.php',
        ],
        options: {
            defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
            whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
        },
    },
    plugins: [
        require('@tailwindcss/custom-forms'),
        require('@tailwindcss/ui'),
        require('@tailwindcss/typography')
    ],
};