So in this example:

    Button

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

. 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.

tcfunk

I've been using tailwind in combination with styled components, so that I can easily capture repeated sets of classes. Something like:

  const PostImage = styled(Img).attrs({
    className: `
      duration-100
      transform
      transition-transform
      ease-in
      hover:scale-110
    `
  })``

01brett

Author here, have you looked at twin.macro?

https://github.com/ben-rogerson/twin.macro