Tailwind 2.0 palette color might be the sexiest on the interwebs, now featuring 50 shades of gray.
TailwindCSS v2.0
231–240 of 474 posts
Re: TailwindCSS v2.0
#232Earlier quoted context omitted.
Every designer I've met loves consistency and design systems, but I've found that most design tools are too limited to cover the cases you are discuss. Figma can make a library of colors/fonts, but it doesn't have anything to enforce spacing constraints. It's very possible your designer would have been happy with w-6 or w-8, but their design tool didn't give them that feedback loop, so they pushed ahead with 28px. I'…
You lead a charmed life, my friend. Many designers I have known think of consistency in terms of branding (at most). There is almost always some weird edge case that means a new font size, or unique spacing. Get enough of those, and the design system falls apart. Some are better than others at this, obviously, but the mix has not really been in consistency's favor (though I will admit it has been improving the past f…
(not the person you're replying to) This is so true, and thanks for introducing me to Adam Wathan's Youtube channel, I had no idea this existed. I work closely with designers who use tools like Sketch, Framer, Figma, etc and I'm always finding little edge cases where their "pixel perfect" designs have mismatched paddings, margins, often half-pixel letter spacing that they've decided is more aesthetic in their design tool. It can be hard to push back sometimes.
Re: TailwindCSS v2.0
#233I don't do front end dev, and haven't for a very long time, but can someone help me understand how this doesn't lead to inflexible hard to maintain soup? Just to take colours, for a moment. Ordinarily I might define semantic classes, let's say "primary-nav" or "prominent-action" and apply them to relevant things (and use relative selectors for things inside them, etc.). So if I want to change the colour of all promin…
Basically, these concerns are split in half now, between components and design systems.
In my opinion tailwind works out best if you use components or use template partials in a component style. In that case, there won‘t be that many places where you declare what your primary nav looks like. You just go into the PrimaryNav component and change the class.
In the other case you mention, you may want to use a semantic color name, which you can do in tailwind.config.js no problem, so your color class could be bg-action-300 or bg-red-action. Now this is not the same as some action-primary css class which could contain color, layout, an IE hack whatever. It‘s only predictable design system primitives like color, spacing, typography style, shadows etc. You can think of these like types in a programming language because they are enforced and predictable, not ad hoc thought up by developers per project.
Both of these things have emerged more strongly in frontend in recent years, so it makes sense that different things make sense than 10 years ago (semantic classes)
Re: TailwindCSS v2.0
#234Framework author here! Don't miss the new landing page, it is probably the part I was most excited to share :) https://tailwindcss.com/ Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out. The trailer in the blog post is absolutely 100% a joke in case it's not obvious. The music was scored for us by a friend, and that's a real life professional opera singer at th…
Hey Adam! I know the video's meant to be over the top but I'd be curious who/what you worked with to make the visuals and animation if you're willing to share :)
Re: TailwindCSS v2.0
#235Earlier quoted context omitted.
I was in the same boat. It felt super wrong. It felt like the long, slow nightmare of maintaining an early Boostrap site all over again. But I got peer-pressured into trying it on a medium-sized project and yep: I'm in love. I'm in camp Utility Classes now. The only serious issue I had was when implementing designs provided by an outside designer: 1. The design says this width needs to be 28 px 2. That'd be "w-7", wh…
Every designer I've met loves consistency and design systems, but I've found that most design tools are too limited to cover the cases you are discuss. Figma can make a library of colors/fonts, but it doesn't have anything to enforce spacing constraints. It's very possible your designer would have been happy with w-6 or w-8, but their design tool didn't give them that feedback loop, so they pushed ahead with 28px. I'…
you can set custom grids in Figma (like a 4px grid for instance), and you use workaround like spacer elements, and you can setup margins/padding with auto-layout for your components, but yeah there aren't reusable classes in Figma for spacing. Would be nice if there was
Re: TailwindCSS v2.0
#236Earlier quoted context omitted.
I'll identify as in the "not yet convinced" category on Tailwind (though, I have evolved on other paradigms, which I will now discuss). JSX felt wrong (at first) due to co-mingling HTML and JS, however, I realized that's the wrong application of concerns because 1. JSX isn't HTML, it's a sugared syntax for the React.createElement API and 2. that separation wasn't meaningfully improving my architecture and in retrospe…
> JSX felt wrong (at first) due to co-mingling HTML and JS, however, I realized that's the wrong application of concerns because The line React core team would say is that that what you're thinking of isnt "seperation of concerns" but rather "seperation of technologies". React/JSX is good because both the HTML and JS together is the view. It's the same concern. React seperates concerns much better because it so heavi…
Agreed. We got used to thinking of any Javascript as "business logic" rather than "presentation" because it's an imperative language, but React/JSX are tailored to using JS in a way that acts more like presentation. If you write it imperatively, it won't be idiomatic React, and sooner or later something will break.
So it may help to think of JSX as using a functional subset of Javascript. It's not, and that veil gets pierced pretty often, but the better you contain it, the more you can effectively use both Javascript and HTML together as part of a single concern.
Using Redux with sagas even further separates out the most side-effecty parts of it, though sagas are really heavyweight and I'm still not certain if I think they're worth it.
Re: TailwindCSS v2.0
#237Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come…
I am definitely missing something. What I don't get: if tailwind provides all the preprocessor parts, why do people need to put the class definitions as part of the HTML?
I would completely get behind tailwind if it was only the SASS part. Give me a bunch of mixins and consistent variable naming, which I could just `@import` into a sass file where I get the definitions for UI elements, widgets, etc... the whole "Design system" if that is the word kids use these days.
All of that can (and should if you actually paid attention at the CSS Zen Garden) stay outside of the HTML. So why when I go to any introduction to Tailwind it still shows all that code, I get major WTFs on my head and then I just go back to my simple SASS-based workflow.
What I'd like to see in the next generation of CSS frameworks would be for it to be able to take a completely classless HTML document (like CSS Zen Garden, modernized to HTML5?) and have it look like 3 or 4 different design systems without touching the HTML. Or for extra points, take a web application like webapp (web version of winamp) and show how you can make completely different skins just be redefining the base types and the color palette.
Re: TailwindCSS v2.0
#238Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come…
> You probably haven't actually delved into Tailwind on a non-trivial project.
This is precisely where Tailwind breaks down IMO. It's fast for landing pages and smaller sites--but when implementing a real design system across a complex web app, Tailwind is a nightmare. We've had to add so much custom stuff to the config file it's basically the same mess our CSS was before.
I've been-there-done-that with the whole CSS framework world (have used Bootstrap, Tachyons, Bulma, Tailwind in many projects) and have completely reverted back to custom stylesheets with a few select utility classes that make sense.
Padding, margins, widths, heights do not make sense as utility classes IMO.
Type scales, type modifiers (like font-weight), and commonly used things like margin-x-auto and 100% width do.
I wish there was a CSS framework that only contained a minimal set of common utilities (like the ones mentioned above) and required no complex build process BS or NPM.
I just want a simple boilerplate, nothing else.
Re: TailwindCSS v2.0
#239Tailwind smells like using a style attribute but with properties that are fewer characters. It's fully embracing what everyone said to avoid. What am I missing?
It does. Using inline style attributes is basically a good idea when using a component framework, except for missing features and questionable performance. Tailwind solves that.
There is an influential presentation from, i think, someone on the react team that started the whole CSS-in-JS thing. It just advocated for using inline styles. I can‘t seem to find it.
React and Vue have special handling of the inline style attribute to make it more pleasant to use, so it‘s not been fully discouraged for a while.
Re: TailwindCSS v2.0
#240Framework author here! Don't miss the new landing page, it is probably the part I was most excited to share :) https://tailwindcss.com/ Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out. The trailer in the blog post is absolutely 100% a joke in case it's not obvious. The music was scored for us by a friend, and that's a real life professional opera singer at th…
OK, the trailer sold me. Seriously. I was skeptical about Tailwind, but the trailer makes it feel like you're my kind of person, and I want to try your product.
Also credit to a post above, which acknowledges the "it feels wrong but it makes sense in the end" sense. I'd dismissed Tailwind in the past over the feeling that it was the Wrong Thing. This convinces me to give it a try the next time I'm starting on something.