Automatically add @apply directives to the tailwind.config.js safelist.

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
const config = {
    content: [
        './js/**/*.{js,vue}',
    ],

    darkMode: 'false',

    theme: {
        extend: {
            colors: {
                'aztec': {
                    DEFAULT: '#122223',
                    50: '#50989C',
                    100: '#498B8F',
                    200: '#3C7174',
                    300: '#2E5659',
                    400: '#203C3E',
                    500: '#122223',
                },
                'orange-peel': {
                    DEFAULT: '#FF9900',
                    50: '#FFE2B8',
                    100: '#FFDAA3',
                    200: '#FFCA7A',
                    300: '#FFBA52',
                    400: '#FFA929',
                    500: '#FF9900',
                    600: '#C77700',
                    700: '#8F5600',
                    800: '#573400',
                    900: '#1F1200',
                    950: '#030200'
                },
            },
        },
    },

    corePlugins: {
        preflight: false,
        container: false,
    },

    safelist: (() => {
        const fs = require('fs');
        const glob = require('fast-glob');
        const classSet = new Set();

        glob.sync('./**/*.css').forEach(file => {
            const content = fs.readFileSync(file, 'utf8');
            [...content.matchAll(/@apply\s+([^;]+);/g)].forEach(match => {
                match[1].split(/\s+/).forEach(cls => classSet.add(cls.trim()));
            });
        });

        return [
            {
                pattern: /^(sm:|md:|lg:|xl:|2xl:)?(block|inline-block|inline|hidden|flex)$/,
            },
            {
                pattern: /^(sm:|md:|lg:|xl:|2xl:)?(w-full|w-auto|w-1\/2|w-1\/3|w-1\/4)$/,
            },
            {
                pattern: /^items-(start|center|end|stretch)$/,
            },
            {
                pattern: /^justify-(start|center|end|between|around)$/,
            },
            {
                pattern: /^text-(xs|sm|base|lg|xl|2xl|3xl)$/,
            },
            {
                pattern: /^rounded(-(none|sm|md|lg|full))?$/,
            },
            {
                pattern: /^gap-[0-8]$/,
            },
            {
                pattern: /^p-[0-8]$/,
            },
            {
                pattern: /^pt-[0-8]$/,
            },
            {
                pattern: /^pb-[0-8]$/,
            },
            {
                pattern: /^ps-[0-8]$/,
            },
            {
                pattern: /^pe-[0-8]$/,
            },
            {
                pattern: /^m-[0-8]$/,
            },
            {
                pattern: /^mt-[0-8]$/,
            },
            {
                pattern: /^mb-[0-8]$/,
            },
            {
                pattern: /^ms-[0-8]$/,
            },
            {
                pattern: /^me-[0-8]$/,
            },
            'static',
            'fixed',
            'absolute',
            'relative',
            'sticky',
            'text-left',
            'text-center',
            'text-right',
            'whitespace-nowrap',
            'overflow-hidden',
            'overflow-auto',
            'overflow-scroll',
            'grow',
            'shrink',
            ...Array.from(classSet),
        ];
    })(),

    plugins: [
        require('@tailwindcss/aspect-ratio'),
    ],
}

export default config