4 ms·

You can group Tailwind classes into parent classes using @apply and everything works as you'd expect

by imilk 5y ago

ehutch79 5y ago
Adam Wathan even says this is a code smell, and is just for the myriad of corner cases. If all your classes are in an apply, why not just use the CSS? most of the utility classes are one line classes
- city41 5y ago
  I feel like one of the best benefits of Tailwind is often overlooked. It's essentially a design system in a box. A simple and general one (which makes sense), but a system none the less. All of the classes being related to each other, ie in `p-1` and `m-1`, the 1 means the same value (0.25 rem). But also the fact that the sizing system exists and is pragmatic is very useful. Tailwind sites often feel more consistent and they just "feel" better because Adam and his team took the time to design a well considered sizing system. The same holds true of colors, shadows, font size, etc. And even better, if you work at a place where a custom design system is needed, Tailwind has pretty much everything you need to customize your own but still give the same Tailwind productivity to developers.
  - galuggus 5y ago
    Yes. I use tailwind because it's the easiest way to get something responsive working very quickly. I'm not a designer but stuff made with tailwind always looks presentable and clean. With vanilla CSS I'm constantly forgetting media queries and fail to have consistent margins and padding. Tailwind is great!
  - omniscient_oce 5y ago
    This is the same as most CSS-in-JS solutions though isn't it?You have a theme.js (that comes with a default) that confirms to the theme UI standard that is pretty much what your tailwind.config.js is. Then you can save variants (similar to @apply in Tailwind).
    - city41 5y ago
      I've only used styled-components to any extent for css-in-js, I don't remember it having anything to do with a design system? Can you name some examples, you got me curious. Do these theme.js files have full sizings, spacings, etc defined?
- imilk 5y ago
  Because the code can get hard to parse, especially if you are using conditional classes based on state or other values.
nickUCB 5y ago
Sure you can do tricks like this, but at a certain point it just wraps back around and suddenly you find yourself just doing regular CSS anyways.
- imilk 5y ago
  Not really, because I only really use @apply for conditional classes and Tailwinds still provides you with a standardization for your CSS code that you don't have otherwise.

You can group Tailwind classes into parent classes using @apply and everything works as you'd expect

by imilk 5y ago

You can group Tailwind classes into parent classes using @apply and everything works as you'd expect

Adam Wathan even says this is a code smell, and is just for the myriad of corner cases. If all your classes are in an apply, why not just use the CSS? most of the utility classes are one line classes

city41 5y ago
I feel like one of the best benefits of Tailwind is often overlooked. It's essentially a design system in a box. A simple and general one (which makes sense), but a system none the less. All of the classes being related to each other, ie in `p-1` and `m-1`, the 1 means the same value (0.25 rem). But also the fact that the sizing system exists and is pragmatic is very useful. Tailwind sites often feel more consistent and they just "feel" better because Adam and his team took the time to design a well considered sizing system. The same holds true of colors, shadows, font size, etc. And even better, if you work at a place where a custom design system is needed, Tailwind has pretty much everything you need to customize your own but still give the same Tailwind productivity to developers.
- galuggus 5y ago
  Yes. I use tailwind because it's the easiest way to get something responsive working very quickly. I'm not a designer but stuff made with tailwind always looks presentable and clean. With vanilla CSS I'm constantly forgetting media queries and fail to have consistent margins and padding. Tailwind is great!
- omniscient_oce 5y ago
  This is the same as most CSS-in-JS solutions though isn't it?You have a theme.js (that comes with a default) that confirms to the theme UI standard that is pretty much what your tailwind.config.js is. Then you can save variants (similar to @apply in Tailwind).
  - city41 5y ago
    I've only used styled-components to any extent for css-in-js, I don't remember it having anything to do with a design system? Can you name some examples, you got me curious. Do these theme.js files have full sizings, spacings, etc defined?
imilk 5y ago
Because the code can get hard to parse, especially if you are using conditional classes based on state or other values.

nickUCB 5y ago

Sure you can do tricks like this, but at a certain point it just wraps back around and suddenly you find yourself just doing regular CSS anyways.

imilk 5y ago
Not really, because I only really use @apply for conditional classes and Tailwinds still provides you with a standardization for your CSS code that you don't have otherwise.