Live data from Hacker News

TailwindCSS v2.0

blog.tailwindcss.com

301–310 of 474 posts

Re: TailwindCSS v2.0

#301

Earlier quoted context omitted.

Apologies if this seems snarky but it would be far more useful if you could explain your point rather than a generic condescending "[you] haven't delved into Tailwind on a non-trivial project".

I don't think they were being condescending – there's a lot of material out there on why Tailwind is good, it's easy to find via Google, but nothing beats trying it out. If you don't want to do that then you could watch some of Adam Wathan's screencasts on YouTube where he uses Tailwind to recreate pages or build new ones. https://www.youtube.com/c/AdamWathan/videos?view=0&sort=p&fl...

The benefits are "you don't suffer from ". The cost is cluttered markup and what appears to be impossible reuse.

This smells a lot like every other tech bandwagon. It's the best thing since sliced bread until wide adoption exposes all the flaws and we go back to what proceeded it.

Re: TailwindCSS v2.0

#302

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 have never heard about Tailwind before, but the interactive elements and animated mini examples on the landing page are stellar at conveying what problems the framework solves. I've been putting off the UI for small project of mine and this looks like a great chance to try it out.

Re: TailwindCSS v2.0

#303
post #262

I don't get why Tailwind is so hot. Do any of you actually maintain large custom design systems? Where the same system is used across multiple code bases, with varying components, where you need to be able to accurately replace the look of a component, that might be coded in multiple dev environments (Angular, PHP, React...)? If so, you would be running away from this approach fast. BEM/ITCSS all the way. How would y…

You can easily just add a BEM tag for that specific component which has no function but allows you to easily find and replace. This is what I do with Tachyons and Tailwind. I like the ease of building with it, especially for a small startup - https://app.assembl.net and https://assembl.net are both Tailwind.

With the @apply directive, Tailwind components, and dead BEM classes for find and replace, tailwind is a joy - and so maintainable!

Re: TailwindCSS v2.0

#304
post #262

I don't get why Tailwind is so hot. Do any of you actually maintain large custom design systems? Where the same system is used across multiple code bases, with varying components, where you need to be able to accurately replace the look of a component, that might be coded in multiple dev environments (Angular, PHP, React...)? If so, you would be running away from this approach fast. BEM/ITCSS all the way. How would y…

You globally replace it by putting it in a component. And even if you use ‘@apply’ everywhere, you still get the benefit of design system consistency and faster styling.

Re: TailwindCSS v2.0

#305

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…

> But as a dev in the government sector, I'm disappointed in the way they just whimsically dump Internet Explorer 11 As a dev in the government sector, working for a large public agency, that's pretty much our attitude to IE 11. I mean, sure, staff in our agency need to keep it around for some legacy apps that haven't yet been migrated or replaced, but its being phased out and we're not supporting it beyond making su…

How do they keep the modern browsers up to date? Are these just Internet-connected machines, they take updates, and everyone just hopes for the best?

Re: TailwindCSS v2.0

#306

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

The inflexible soup can come just as easily in the opposite direction though. Eventually you have prominent-action-7 and you need documentation to understand what all these supposedly semantic names actually mean in reality and figure out which one you want. Or you want to change the look of your prominent actions, so you change the class definition and then later you realize someone made a totally different kind of thing look like a prominent action and just reused the class but now it should no longer be the same. Making a change in one place breaks other things in totally unrelated places in the app. So in order to avoid that, you need to look closely at every use of a thing anyway when making a change to make sure you're not breaking something. And if you're doing that, then you're not even getting any benefit from your abstraction anymore, you almost might as well change every instance of the thing one by one if you have to carefully comb through them all anyway.

> So if I want to change the colour of all prominent-actions across my web app

As I was just saying, it's naive to think this would ever be a simple one-line change of a constant. It will inevitably be a moderate sized undertaking no matter what you do, because of all the cruft and coupling that may have built up under the old assumptions. But it's also not something you're doing every day, so it should be far from the first thing on your mind when thinking about which patterns are most helpful to use.

But, even putting all that aside, using utility classes like Tailwind doesn't even prevent you from abstracting as much as you'd like. You just do it at a different level. You're not likely writing static html on every page anyway, you're probably using code to generate your html whether that's React components, server-side rendered views with partials and templates, templates in a static site generator, etc. So you can still do the abstraction you want at the level of your components or your view code instead of via css classes. In that world you can think of tailwind as just a higher-level version of the underlying css properties. And you're still free to repeat yourself or DRY-ify your code as much as you want (though as I allude to above, I tend to think DRY in programming is often very overrated).

Re: TailwindCSS v2.0

#307

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.

And want to add scrolling on Safari 14 isn't very smooth at all. Although that is probably Safari's fault.

Re: TailwindCSS v2.0

#308

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…

For the minimal CSS framework, I've been a fan of Tachyons on past projects https://tachyons.io/

Re: TailwindCSS v2.0

#309
post #247

Earlier quoted context omitted.

> find and replace works fine It would replace every `.font-extrabold` element on the page. What if I only want to update my extra bold headlines, not the extra bold subheadings? Global search-and-replace breaks my subheadings. >> 5. Not skipping back and forth between HTML or CSS files [with Tailwind] > You absolutely do skip between lots of HTML [with Tailwind] ??

Yep. There's so many global replace situations where the logic completely breaks.

In my experience global replace is much easier across multiple component files rather than multiple CSS files. If I need to do change a font color I do a search and know to change it based on the file/component it's used in. If I had to change the color in css files I'd have to review the class and also track down where that class is in use.

Re: TailwindCSS v2.0

#310

The things I love the most about TailwindCSS: 1. After purged the CSS file is really, really small. 2. Hopping into all of my projects and not having to remember new class names. 3. Not having to come up with new class names. 4. Not worrying about making a change in a class and having unintended consequences. 5. Not skipping back and forth between HTML or CSS files. That said, if you don't dig it, there are plenty of…

> 5. Not skipping back and forth between HTML or CSS files. What? I thought the point of this was for use with composable JS components. You're manually writing and updating attributes like this?! class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10" How could you possibly manage this without components? Ctrl-F "lg:text-7xl" and replace?

Lots of good responses already on other ways to abstract, but I'll even go one further and say "sure, why not?"

When are you changing every single instance of "lg:text-7xl"? More often you're probably making a change in one single place in the app, in which case this is incredibly easy, you just make your change where you want. You're not slowed down by digging through layers of abstraction cruft and indirection until you find the right place to make the change.

If you're doing an entire site design refresh, then doing some find and replace isn't really that crazy. For something you do relatively infrequently like this (maybe every couple of months or even every couple of years?) it's not a big deal if it takes a little bit longer. And likely you'll need to look through and test your changes on every page one by one anyway, to make sure you're not breaking anything you didn't mean to. You'll need to do that whether you changed the definition of a css class, or you made a bunch of inline changes, at which point making the actual code edits inline probably isn't even the bottleneck.

But again, that's perhaps a bit extreme of a way to look at it. You will inevitably have some layer of abstraction anyway, something like components or templates or partials, in which to wrap your styles.

Post reply on HN