61–70 of 106 posts
Earlier quoted context omitted.
So what happens when your design changes and suddenly all your white buttons need to be off-grey? You change the class on 700 components?
In tailwind, you have a config file. You can just change the variable in the config file to the colour you need to change it to and it changes globally.
Keep HTML for HTML and CSS for CSS.
Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!) You really do have to try it to shake that impression. If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/C…
This [1] is one of the best articles I've read describing the issues and thought processes around the complexities of structuring css. But the suggested conclusions are exactly where I start to have problems. Take this recommendation for example: .align-left { text-align: left; } This is a very reusable class, of course, because it is literally just css but with a different name. But that's what always ends up happen…
Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!) You really do have to try it to shake that impression. If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/C…
Also, from a previous comment of mine:
“Problem is, defining quantity in the class name doesn’t work. .m10 may be fine for desktop but not for mobile. Then you’ll have media queries which define .m10 as margin: 5px or something, which is nuts. You could go for unspecified .mSmall etc, but in real life, things tend to be more specific and messier, in my experience.”
This is something that went understated in other functional libraries, even though composition has been possible for years using preprocessors. So when people saw Tachyons, for instance, they would recoil at what they saw as an unmaintainable mess even though the underlying theory is sound.
I really like the work Adam is doing and where he is leading the conversation. I will read anything he writes, too. He's great at expressing his ideas and rallying you around things you didn't know you care about.
Earlier quoted context omitted.
In tailwind, you have a config file. You can just change the variable in the config file to the colour you need to change it to and it changes globally.
"white-bg" then becomes a blue background that's called white...
Most frameworks support some kind of re-use of CSS declaration blocks - use that feature to build your components from the primitives they provide, but also add a layer of indirection by putting those components behind a semantic class name. Voila, loose-coupling with all the productivity benefits of the frameworks.
Login
.login-button { @apply .btn-primary; }
.btn-primary { @apply .font-bold .py-2 .px-4 .rounded; }What's the difference between tailwind and tachyons?
Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!) You really do have to try it to shake that impression. If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/C…
What if you need to change justification, image proportions, etc on mobile for instance? Also, from a previous comment of mine: “Problem is, defining quantity in the class name doesn’t work. .m10 may be fine for desktop but not for mobile. Then you’ll have media queries which define .m10 as margin: 5px or something, which is nuts. You could go for unspecified .mSmall etc, but in real life, things tend to be more spec…
Earlier quoted context omitted.
"white-bg" then becomes a blue background that's called white...
To be fair, you can do that with SASS variables too and is not unique to Tailwind.