3 ms·

I really like Tailwind's approach in some cases, it does make prototyping extremely fast. What I'm really missing (and I don't understand it doesn't exist) is

I really like Tailwind's approach in some cases, it does make prototyping extremely fast. What I'm really missing (and I don't understand it doesn't exist) is a way to compose classes into a single class, to refactor collections of small utility classes into a meaningful class with semantic sense. Why can't I do something like: .my-class { use .text-sm use .text-gray use .bold } Kind of like calling several functions from a single function to compose their effects. The only things that come to mind are SCSS mixins (but would have to declare the `text-gray` mixin AND the `text-gray` class, plus it doesn't with a lib like tailwind that provides classes), or CSS-in-JS trickery. Styled-component allows this sort of things, but it still doesn't feel very nice to use. If I've missed something and this is actually possible, please somebody tell me!

mike1o1 7y ago
This already exists and it's great! https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply https://tailwindcss.com/docs/extracting-components#extractin... .btn { @apply bg-blue-500 text-white py-2 px-4 rounded; }
htunnicliff 7y ago
If you take advantage of PostCSS or Tailwind's CLI, you can compose something like: .my-class { @apply text-sm; @apply text-gray; @apply font-bold; }
- williamdclt 7y ago
  This is exactly what I want, down to the syntax!
pdr2020 7y ago
Other commenters have addressed ways to implement this. But ideally, instead of extracting that specific collection of classes out to a class, extract out the HTML fragment into it's own template (or into it's own React Component or insert framework component abstraction here). The cleaner separation now is: 1. classes represent some atomic unit that enforces (for that unit) some design system specification 2. html fragments represent a specific implementation composed of those atomic units

mike1o1 7y ago

This already exists and it's great! https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply https://tailwindcss.com/docs/extracting-components#extractin... .btn { @apply bg-blue-500 text-white py-2 px-4 rounded; }

htunnicliff 7y ago

If you take advantage of PostCSS or Tailwind's CLI, you can compose something like: .my-class { @apply text-sm; @apply text-gray; @apply font-bold; }

williamdclt 7y ago
This is exactly what I want, down to the syntax!

pdr2020 7y ago

Other commenters have addressed ways to implement this. But ideally, instead of extracting that specific collection of classes out to a class, extract out the HTML fragment into it's own template (or into it's own React Component or insert framework component abstraction here). The cleaner separation now is: 1. classes represent some atomic unit that enforces (for that unit) some design system specification 2. html fragments represent a specific implementation composed of those atomic units