Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

TailwindCSS v2.0

blog.tailwindcss.com

Post reply on HN
Print view View original

291–300 of 474 posts

Re: TailwindCSS v2.0

#291

Post by rriepe »

pembrook wrote: post #238
seancoleman wrote: post #89

Tailwind 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…

I'm working on something like this which is close to 1.0. I'd love your feedback: https://cavepaint.github.io/cavepaintcss/

Re: TailwindCSS v2.0

#292

Post by rglullis »

antris wrote: post #285
rglullis wrote: post #261

Earlier quoted context omitted.

> But now you still have the issue of coming up with CSS class names. Not entirely true. I'd be totally fine with class names that identify what type of widget it is. , , or are "made up CSS class names" that identify a type of widget and used without making no assumption about presentation concern. and are not. And yes, I understand that tailwind allows you to create types and @apply them. What I am saying is that (…

>Except when they aren't. Downthread I gave the example of a library project that I want to define the functionality/behavior but leave the looks/styling to the consumer. Sounds a lot like an edge case. Most consumer applications do not need theming.

Most desktop applications also don't need them, or just use the standard style defined by the OS toolkit.

My larger point is that when you are developing a web app, it would be much easier if the framework was designed in a way that separated the concerns of presentation and behavior of the components.

Just to use Vue as it is what I am using now and had to get a bit more familiar: you have libraries like Vue Bootstrap and Vuetify (for Material Design) which have a lot of duplicate functionality yet are not compatible with one another.

If the concerns were separated, you could have components that have a common behavior and only differ in the visuals. Less work for everyone involved, easier for developers to get started, less unnecessary fragmentation and the possibility of positive feedback cycle between different design systems.

Re: TailwindCSS v2.0

#293

Post by ukyrgf »

davidwparker wrote: post #100
have_faith wrote: post #14

What kind of projects do people use Tailwind for? and what's the general role of the person using it? I haven't found a use for it myself as a predominantly front-end dev but I've met a few devs who like it a lot but found that they were generally less comfortable writing plain css without a framework. No shade towards Tailwind intended, just not a paradigm I've gotten on board with yet and trying to understand.

I used it for my site here: https://www.listenaddict.com/ I've also used it for other various sites in the past. Makes it trivial to add / change / design things quickly, which for me as a non-designer, is great. Also, works well to make things look good on mobile/tablet/desktop sizes, light and dark mode.

For whatever reason, the homepage flashes dark mode, switches to light, but the icon stays a sun. I have to click that twice to get to dark mode and then it works as expected.

Re: TailwindCSS v2.0

#294

Post by htnsao »

antonio-ramadas wrote: post #163
adamwathan wrote: post #128

Framework 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…

I don’t want to steal the focus from the achievement, but the landing page fails to open on Safari on iPad Air 2013.

Yes, still seeing that too. The tailwindcss homepage fully loads for a brief moment then shows a white screen with "An unexpected error has occurred."

Using Firefox on an Android phone.

Re: TailwindCSS v2.0

#295

Post by aembleton »

pembrook wrote: post #238
seancoleman wrote: post #89

Tailwind 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…

Try https://andybrewer.github.io/mvp/

Re: TailwindCSS v2.0

#296

Post by rglullis »

thepratt wrote: post #290
rglullis wrote: post #261

Earlier quoted context omitted.

> But now you still have the issue of coming up with CSS class names. Not entirely true. I'd be totally fine with class names that identify what type of widget it is. , , or are "made up CSS class names" that identify a type of widget and used without making no assumption about presentation concern. and are not. And yes, I understand that tailwind allows you to create types and @apply them. What I am saying is that (…

With your example lower down, what you're describing is entirely possible both with tailwind[1] (depending how you provide your config), and CSS-in-JS toolkits like emotion. These are called themes and they're normally handled with writing a provider that needs to be included higher up in the chain, your CSS function then includes this parent configuration as an argument.[2][3] You can only change so much of the styl…

Yes, I understand it is possible. What I am saying though is that if we design things with separation of concerns from the start, this would never be a problem in the first place.

> You can only change so much of the styling without changing markup.

I take that you are not old enough to remember the CSS Zen Garden?

Even with craptastic CSS2 implementations of IE7 and no browsers that could fully pass the ACID3 test, the Zen Garden showed how anything could be changed without touching markup.

Don't tell me that it's harder in 2020 because it is a whole lot easier.

Re: TailwindCSS v2.0

#297

Post by JxLS-cpgbe0 »

samuelstancl wrote: post #108
timdorr wrote: post #27

For those complaining about dense HTML using Tailwind, the headline feature of 2.0 should be @apply for everything: https://tailwindcss.com/docs/functions-and-directives#apply It lets you move all of those excessive class attributes into your CSS, where it realistically belongs. And that makes your CSS look a little more like CSS. But you get guard rails on it by applying a known set of properties to each rule. It's…

> It lets you move all of those excessive class attributes into your CSS, where it realistically belongs No. Adam said multiple times that he basically added the feature to make onboarding people smoother. The right way to use Tailwind is to extract components, for example in Vue. That way you have the markup, behavior, and styling in self-contained in a single file, that can be used anywhere, without leaking any int…

    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
so @mixin in Sass? @apply in CSS? (being replaced with Shadow Parts)

Re: TailwindCSS v2.0

#298

Post by JxLS-cpgbe0 »

chrisan wrote: post #59
timdorr wrote: post #45

Earlier quoted context omitted.

Again, guard rails on those property sets. You are locked into a set of values and they are unlikely to conflict in some odd way. You can also apply configuration changes globally that might affect multiple properties. If you're changing from px to rem for sizing, you can do that without having to go through your entire code base to update that. Or if you need to tweak a color, it's applied everywhere, including comp…

How is that different than Sass with some of the same classes `items-center`, `flex-auto`, `space-x-3` etc?

Or the utility classes in Bootstrap?

Re: TailwindCSS v2.0

#299

Post by cosmotic »

Kiro wrote: post #83
cosmotic wrote: post #39

Tailwind 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?

What's the problem with style attributes? I would use them instead of regular CSS if I could add pseudo-attributes and make them responsive. Since I can't I use Tailwind where that's possible.

Style attributes have very high specificity so they basically preclude using normal CSS files (they would mandate every line include !important)

Re: TailwindCSS v2.0

#300

Post by mmmateo »

withinrafael wrote: post #201

I use TailwindCSS for some personal projects, works great, no major complaints. But as a dev in the government sector, I'm disappointed in the way they just whimsically dump Internet Explorer 11 in their release notes [1], as if it's a minor thing / cool to hate on. In my bubble, there's no alternative right now. Switching to a more modern browser requires an enormous amount of agility throughout the pipeline that do…

Even so, that doesn’t mean everyone else should shoulder the burden of larger css bundles and slower updates. Version 1.9 is still great.
Post reply on HN