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

261–270 of 474 posts

Re: TailwindCSS v2.0

#261

Post by rglullis »

darekkay wrote: post #252
rglullis wrote: post #237

Earlier quoted context omitted.

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 "Desi…

The answer to your question is the actual confusion regarding "separation of concerns" in HTML and CSS. You can do what you've described with Tailwind: check out @apply. But now you still have the issue of coming up with CSS class names. Because CSS on its own doesn't do anything. There is a high dependency between HTML and CSS and it'a up to you to choose the dependency direction. HTML and CSS are not concerns, they…

> 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 (1) I'd like to see this separation to be enforced and not just possible and (2) plain SASS also lets you do that already. so I don't understand what I would gain from adding tailwind.

> Components are a better way for separating concerns

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.

Desktop GUIs have theme engines for ages, yet frontend web developers want to get excited about frameworks that allow for "night mode"? "Night mode" is just a way to say "you can separate presentation and content however you want, as long you only present in two different styles".

Re: TailwindCSS v2.0

#262

Post by Wolfr_ »

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 you globally replace something that is marked up like this (example appears somewhere else in this thread)? How would you assert what this code means across projects?

    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"
With BEM/ITCSS, you would have a custom namespace like `auk`:

    class="auk-btn auk-btn--primary"
And you can reason about it, maybe in project 2 it is

    class="auk2-btn auk2-btn--primary"
So now you can refactor the old buttons out to replace the new buttons. Good luck with the mess above.

If people say: you can use `@apply`. Yeah. If you write your whole stylesheet in `@apply` logic, why are you using Tailwind at all?

Design tokens and the re-use of design variables is not a Tailwind thing by the way. Some people seem to be acting like it is. We've had variables in Sass for over since 2009. People have been doing clever things with variable maps (arrays) in Sass since forever. There's no way Tailwind can take credit for this.

I've written extensively about why Tailwind is problematic:

(1) https://johanronsse.be/2019/11/11/thoughts-on-tailwind-css/

(2) https://johanronsse.be/2020/07/08/why-youll-probably-regret-...

(3) https://johanronsse.be/2020/08/20/hey-your-api-surface-is-ca...

Don't fall for it! The marketing is sweet but the choice will hurt you in the end.

Re: TailwindCSS v2.0

#263

Post by darekkay »

fareesh wrote: post #197
samuelstancl wrote: post #108

Earlier quoted context omitted.

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

Can you help me understand the architecture a bit better? I have some reservations. If you extract components then you require JS (low lighthouse score, lots of JS processing on slow devices, likely SEO problems) or SSR to render the page and then serve it (high TTFB) Ideally you would have some kind of build step that can pre-process all the vue components and spit out pre-rendered HTML for all pages but preserve th…

> If you extract components then you require JS

Only for interactive components. You can use PHP or a static site generator and create components with no runtime JS at all.

Re: TailwindCSS v2.0

#264

Post by jdminhbg »

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?

I'm a non-designer developer who nonetheless does some frontend work, so with that grain of salt, here's my take:

What everyone said to avoid was actually just wrong. Semantic CSS failed. Tailwind (or utility classes in general) is the best way to implement a reasonably-maintainable and properly-specified version of putting things in the style attribute.

Re: TailwindCSS v2.0

#265

Post by dragonwriter »

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…

> 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 sure that we detect it and put up a banner explaining that its not supported for some of our current (internal and external) apps.

Re: TailwindCSS v2.0

#266

Post by rendall »

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…

That is a fun trailer. I laughed

Re: TailwindCSS v2.0

#267

Post by Wolfr_ »

kevmo314 wrote: post #5
Wolfr_ wrote: post #4

Their marketing is good, they do a primo job at conveying the message in a nice looking way, but the end result is still HTML littered with hundreds classes, that gets hard to maintain and impossible to refactor.

I'm a big fan of Tailwind because I've realized that HTML isn't really maintained and refactored anyways: it's either composed or rewritten. Rarely do refactors happen in the same way as most programming languages.

Depends on the kind of work, for me, in the kind of long-running web software I make HTML is actually maintained or refactored.

Re: TailwindCSS v2.0

#268

Post by jaredcwhite »

SebastianKra wrote: post #210
jaredcwhite wrote: post #123

This isn't how you HTML, people! https://threadreaderapp.com/thread/1329156451416244224.html I don’t have too many programming hills to die on, but taking full advantage of the glory that is HTML5 is one of them. Tailwind is…the opposite of that!

(I have little experience with Tailwind, but I can still make the following argument) I think you're making a mistake in assuming that the example shows how you should actually use Tailwind in a project. The creator himself has said that Tailwind should be combined with whatever component-system your framework provides. That's how you can get your semantic tags. ...and it's also how you should write Websites anyways…

The ol' theory vs. practice…that all sounds fine in theory, but all it means in the end is you've taken a giant wad of dig/span tag soup with 30 utility classes and broken it up into reusable bits of tag soup with utility classes. Or you move everything over to @apply…but now you have a bunch of stylesheets which are completely incompatible with every other CSS framework/build system. It's not a panacea.

Re: TailwindCSS v2.0

#269

Post by wishinghand »

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

If only CSS had thought to include such a feature.

Re: TailwindCSS v2.0

#270

Post by vntok »

nomel wrote: post #223
yurishimo wrote: post #153

Earlier quoted context omitted.

The render time point is misleading. It can be slower but even on low end devices, CSS is so insanely fast, you would need an HTML source in the tens of MB's range to cause noticeable performance problems. Also, CSS classes do make that even less of a problem. Inline styles are fast enough, and classes are faster by default, so Tailwind wins there. Page load times are interesting, but again, unless you're loading an…

> you would need an HTML source in the tens of MB's range to cause noticeable performance problems. What? Do you ever leave the city? It seems like that’s an unsupported use case any many developers minds.

Okay now I'm growing curious, where in hell do you regularly find HTML sources that weigh tens of MBs?
Post reply on HN