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

[verisimilidude]

Yes, you can use Tailwind utility classes within your own CSS files. The Tailwind syntax for creating custom classes is @apply. Here's how they recommend approaching the problem.

https://tailwindcss.com/docs/extracting-components

I find @apply useful for styling HTML that I don't directly control, such as rendered Markdown. Otherwise, I do prefer Tailwind's suggestion to use templates/components instead of custom classes, wherever it makes sense.

[01brett]

Author here, I am using React. What I've done for "it shares some styles but not others" is create a

  const sharedStyles = "..."

and in my component combine the shared with the unique attributes

  <CoolComponent className={`${sharedStyles} py-3`} />

or using a string combiner utility like classNames/clsx

  <CoolComponent className={clsx(sharedStyles, "py-3")} />

If you have a props to change on, you can do this

  <CoolComponent className={clsx(sharedStyles, someProp ? "py-3" : "py-4")} />

[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