3 ms·

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 happe

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.

01brett 5y ago
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 5y ago
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 5y ago
  Author here, have you looked at twin.macro? https://github.com/ben-rogerson/twin.macro https://github.com/ben-rogerson/twin.macro
verisimilidude 5y ago
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 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 5y ago

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 5y ago

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 5y ago
Author here, have you looked at twin.macro? https://github.com/ben-rogerson/twin.macro https://github.com/ben-rogerson/twin.macro

verisimilidude 5y ago

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