states

tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {
    mode: 'jit',
    purge: ['./resources/**/*.{js,vue,blade.php}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        states: ['error', 'loading'],
        extend: {
        },
    },
    plugins: [
        plugin(function({ variants, addVariant, e }) {
            for(let state of variants('states')) {
                addVariant(state, ({modifySelectors, separator}) => {
                    modifySelectors(({className}) => {
                        return `.${e(`state${separator}${state}`)} .${e(`${state}${separator}${className}`)}`
                    })
                })
            }
        }),
    ],
}

test.html

        <div class="">
            <label class="flex rounded border error:border-red-300">
                <input class="flex-grow py-1 px-3 rounded focus:outline-none"/>
                <div class="hidden items-center px-2 error:flex">
                    <!-- Heroicon name: solid/exclamation-circle -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="hidden items-center px-2 loading:flex">
                    <!-- Spinner -->
                    <svg class="animate-spin h-5 w-5 text-gray-200"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
            </label>
        </div>

        <div class="state:error">
            <label class="flex rounded border error:border-red-300">
                <input class="flex-grow py-1 px-3 rounded focus:outline-none"/>
                <div class="hidden items-center px-2 error:flex">
                    <!-- Heroicon name: solid/exclamation-circle -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="hidden items-center px-2 loading:flex">
                    <!-- Spinner -->
                    <svg class="animate-spin h-5 w-5 text-gray-200"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
            </label>
        </div>

        <div class="state:loading">
            <label class="flex rounded border error:border-red-300">
                <input class="flex-grow py-1 px-3 rounded focus:outline-none"/>
                <div class="hidden items-center px-2 error:flex">
                    <!-- Heroicon name: solid/exclamation-circle -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="hidden items-center px-2 loading:flex">
                    <!-- Spinner -->
                    <svg class="animate-spin h-5 w-5 text-gray-200"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
            </label>
        </div>