I usually create old style css name classes and @apply directive to get rid of huge inline classes.
It also let me split styling from behavioural tailwind classes on different @apply directives on the same class so mt-2 is not mixed with hover: and so on
I am in love with tailwind, the way you can just copy paste html and pass it on to a partner and it should look the same (taking position etc. into consideration).
And never having to scroll trough massive css files is worth the hassle of big HTML.
Well it may be fine but tailwind didn't invent anything nor there is anything innovative into this approcah, that's just old css utility classes, a bit like bootstrap ( although you'd most likely still use custom css with it since it;s opinionated ) and almost verbatim what tachyons basscss etc have been doing for years.
You are perfectly right, Tailwind did not invent anything new and Tachyons did this years ago. In my personal experience I prefer Tailwind over Tachyons because class names have better names for the first one.
Take f5-l which for Tachyons means font-size: 1rem.
Tailwind has font-base which means the same thing.
I also love the fact that I do not have to come up with names for classes. In the old days I would say container or container-header, now I just add utility classes like flex flex-col gap-2 and everyone in my team understands the CSS behind it.
What's even the point of using tailwind that way and not just use css/sass ?
Confession: The apply feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.
You should almost never use it 😬
Reuse your utility-littered HTML instead
"Always write React components that you can read without scrolling."
Tailwind has entered the chat
I usually create old style css name classes and
@applydirective to get rid of huge inline classes.It also let me split styling from behavioural tailwind classes on different
@applydirectives on the same class somt-2is not mixed withhover:and so onI am in love with tailwind, the way you can just copy paste html and pass it on to a partner and it should look the same (taking position etc. into consideration).
And never having to scroll trough massive css files is worth the hassle of big HTML.
Well it may be fine but tailwind didn't invent anything nor there is anything innovative into this approcah, that's just old css utility classes, a bit like bootstrap ( although you'd most likely still use custom css with it since it;s opinionated ) and almost verbatim what tachyons basscss etc have been doing for years.
too many class inside single element, make use of tailwind is harder to read.
You are perfectly right, Tailwind did not invent anything new and Tachyons did this years ago. In my personal experience I prefer Tailwind over Tachyons because class names have better names for the first one.
Take
f5-lwhich for Tachyons meansfont-size: 1rem.Tailwind has
font-basewhich means the same thing.I also love the fact that I do not have to come up with names for classes. In the old days I would say
containerorcontainer-header, now I just add utility classes likeflex flex-col gap-2and everyone in my team understands the CSS behind it.What's even the point of using tailwind that way and not just use css/sass ?
from the creator himself twitter.com/adamwathan/status/1226...