Comment by noisy_boy

So in this example:

    <div class='text-base font-sans font-medium rounded-lg bg-gray-100 text-black py-3 text-center cursor-pointer'>Button</div>

What happens if I have 20 of these divs and need to modify py-3 to py-4? Can I create a "local" .css file to "group" these tailwind classes ala pseudocode below?

    .divxyz-default {
        @extend text-base;
        ...
        @extend bg-gray-100;
        ....
    }

If so, then the div becomes <div class='divxyz-default'>. A thought came to mind that in that case I have gone back to CSS modules but then we still have some benefits of standardized classes e.g. instead of specifying how much roundness, I am using standard amount of roundness via "rounded-lg" and if I want to change that globally, I can edit in one place. I am probably missing something.