Sorry, but that is no argument. mx-2 is just another representation of .5rem and the scale is exactly the same since mx-4 is twice of .5rem. The only difference is that you are using some kind of "proprietary" unit instead of standard unit rem. To understand rem, you only need ot understand CSS. To understand mx-2 you need to know tailwind. And if you don't like magical numbers, all css preprocessors understand variables.
And of course is the tailwind team against apply, since its the opposit of what they do.
I dont see that big advantage of using tailwind in comparison of just using inline css.
I some cases, I even HATE Tailwind, when you don't have the full controll of the output html. Just a example - Laravel nova. They use tailwind there. Its almost impossible to change a lot of stuff without really hacky css rules (and they even have some extra classes like btn or card, but way to less of them)
Berhard its more about the design SYSTEM. Applying this to your comment "to understand mx-2 you need to know tailwind" -> you would need to say: "... need to know your design system". And this makes sense, look at is a contract between designer and developer. Therefore using agreed tokens is a big help instead of any not-systemized values like rem, where you would need to measure by hand any spacings. a good read here: medium.com/swlh/design-system-base...
This is the most underrated use of TW CSS! TW as a foundation of a design system that you can specify your own utilties for, or convert into more 'conventional' BEM via @apply is a really good use case IMO. The way I'm currently doing it is like this:
Specify initial TW config w/ custom colors etc
Prototype components using utility classes
When 'done' use @apply to map those utilties into a BEM style CSS file, which can be re-used later by consumer of the design system, but since its TW based can also be easily purged - if I don't use that class in my docs/component templates, its not exported to the library
CSS-in-JS offers similar structure, but TW is probably (or at least the most popular) CSS-first framework that allows for such easy and systematic style composition/extension.
The next thing I'm investigating is how to integrate 'design tokens' into my TW config file - and there's a couple OSS projects that might fit the bill such as Style Dictionary.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Sorry, but that is no argument.
mx-2is just another representation of .5rem and the scale is exactly the same sincemx-4is twice of .5rem. The only difference is that you are using some kind of "proprietary" unit instead of standard unit rem. To understand rem, you only need ot understand CSS. To understandmx-2you need to know tailwind. And if you don't like magical numbers, all css preprocessors understand variables.And of course is the tailwind team against apply, since its the opposit of what they do.
I dont see that big advantage of using tailwind in comparison of just using inline css.
I some cases, I even HATE Tailwind, when you don't have the full controll of the output html. Just a example - Laravel nova. They use tailwind there. Its almost impossible to change a lot of stuff without really hacky css rules (and they even have some extra classes like
btnorcard, but way to less of them)Berhard its more about the design SYSTEM. Applying this to your comment "to understand mx-2 you need to know tailwind" -> you would need to say: "... need to know your design system". And this makes sense, look at is a contract between designer and developer. Therefore using agreed tokens is a big help instead of any not-systemized values like rem, where you would need to measure by hand any spacings. a good read here: medium.com/swlh/design-system-base...
This is the most underrated use of TW CSS! TW as a foundation of a design system that you can specify your own utilties for, or convert into more 'conventional' BEM via @apply is a really good use case IMO. The way I'm currently doing it is like this:
CSS-in-JS offers similar structure, but TW is probably (or at least the most popular) CSS-first framework that allows for such easy and systematic style composition/extension.
The next thing I'm investigating is how to integrate 'design tokens' into my TW config file - and there's a couple OSS projects that might fit the bill such as Style Dictionary.