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

Play with TailwindCSS in the Browser

play.tailwindcss.com

Post reply on HN
Print view View original

61–70 of 300 posts

Re: Play with TailwindCSS in the Browser

#61

Post by danielvaughn »

samtimalsina wrote: post #26

I was in the camp "this-is-bullshit" until recently. It felt backwards. We recently switched to Tailwind for one of our projects, and Tailwind was a delight to use, especially with its VS Code extension. Code readability is surprisingly not that big of a deal because we use components. Of course if you are looking at the raw HTML in chrome tools, it can get disorienting. For folks that are worried about having to lea…

yep. With the VSCode extension, you don't even need to read the docs. I would just type in what I thought I wanted, and most of the time it would work. It's awesome.

Re: Play with TailwindCSS in the Browser

#62

Post by anon1378 »

I cannot believe how anyone can look at the following code below and think that it's maintainable, just for an input box with additional styles for states:
How is mushing every single style into a class attribute supposed to help with readability and maintainability? Even if you use `@apply` to reduce the clutter, you are basically venturing back into "vanilla" CSS territory, and which their docs expressly said to avoid (https://tailwindcss.com/docs/reusing-styles#avoiding-prematu...).

And even if I decided to march forward with tailwind CSS despite all of this, how do I format the code? Break up the classes for different states into separate lines, like so?
Yeah, I do not see how this is more readable than plain CSS. Is all of this worth it, just to avoid having the developer think up of class names, or defining their own theme using CSS variables?

Re: Play with TailwindCSS in the Browser

#63

Post by danielvaughn »

My90thaccount wrote: post #55
jonwinstanley wrote: post #41

Earlier quoted context omitted.

How does it affect quality?

Tailwind means making your HTML non-semantic, usually backed by JavaScript. This has created an arms race where parsers such as screen readers need to do ever-evolving heuristics to provide a reader mode. The code usually cannot be modified or even viewed in a readable form by users. Of all things, it's not user-centric. You're going to tell me next that you have a JSON interface instead. But that's a site-specific A…

I'm sorry but this doesn't make any sense at all, what on earth are you talking about? I'm all for constructive criticism, even if it's harsh, but this makes it sound like you've literally never read anything about Tailwind at all.

First, Tailwind has literally no opinion on whether your html is semantic or not. Second, it isn't "backed by javascript", that's nonsense and is just self-evidently not true. Third, "people with slow browsers" benefit because the CSS footprint is smaller. Fourth, the quality of the site improves with Tailwind because developers can spend their unused energy on other enhancements.

Why get on this thread and spew a bunch of bullshit? What's the point dude.

Re: Play with TailwindCSS in the Browser

#64

Post by zachrip »

anon1378 wrote: post #62

I cannot believe how anyone can look at the following code below and think that it's maintainable, just for an input box with additional styles for states: How is mushing every single style into a class attribute supposed to help with readability and maintainability? Even if you use `@apply` to reduce the clutter, you are basically venturing back into "vanilla" CSS territory, and which their docs expressly said to av…

I like tailwind a lot actually, but I agree with you about the readability of some classes. It'd be cool if the vscode extension helped with that in some way.

Re: Play with TailwindCSS in the Browser

#65

Post by mattferderer »

anon1378 wrote: post #62

I cannot believe how anyone can look at the following code below and think that it's maintainable, just for an input box with additional styles for states: How is mushing every single style into a class attribute supposed to help with readability and maintainability? Even if you use `@apply` to reduce the clutter, you are basically venturing back into "vanilla" CSS territory, and which their docs expressly said to av…

> Is all of this worth it, just to avoid having the developer think up of class names, or defining their own theme using CSS variables?

Yes. You're starting out with a well thought out set of variables & themes. You can tweak if you need. You can add extensions. There are lots of HTML/CSS components written for Tailwind online you can copy/pasta into your project.

But for me the biggest win is just having a ton of variables I can use. I also only use it when building component type architecture & I try to keep my components small & focused.

Re: Play with TailwindCSS in the Browser

#66

Post by jononomo »

rco8786 wrote: post #16

Im sorry but I don’t understand how anyone can look at that and think it’s a good way to build UIs. I’m almost certainly in the wrong, considering how popular this library seems to be getting, but holy heck that looks like a tedious mess to work with. It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup.

I had the exact same opinion after working with tailwind for a week, but then, after a couple more weeks, I fell in love and decided that this is what CSS should have been from the start.

Re: Play with TailwindCSS in the Browser

#67

Post by dham »

anon1378 wrote: post #62

I cannot believe how anyone can look at the following code below and think that it's maintainable, just for an input box with additional styles for states: How is mushing every single style into a class attribute supposed to help with readability and maintainability? Even if you use `@apply` to reduce the clutter, you are basically venturing back into "vanilla" CSS territory, and which their docs expressly said to av…

The problem is you're looking at a single input box. Typically those would be defined as an object and have a prop passed in to configure colors and such. You're typically using it with a frontend framework or web components. If you're in Rails you can use ViewComponents or use apply syntax for primitives. Primitives are the outlier. You define them once and they're out of the way.

Where it shines is when you're not looking at primitives. Most dev work is pushing pixels around for layouts making things responsive, padding, margins, flex direction stuff. And in those cases Tailwind shines because you aren't constantly trying to come up with class names around div and sections. You are authoring you're css right with your markup. The productivity gains is unlike any other tool you can introduce to an org.

Going back and reading a component and making modifications is incredibly nice too because I can just understand everything that's happening right out the gate. I'm not going back and forth between 2 or 3 files and trying to un nest complicated SCSS in my head.

Re: Play with TailwindCSS in the Browser

#68

Post by the_other »

pocketsand wrote: post #33
rco8786 wrote: post #16

Im sorry but I don’t understand how anyone can look at that and think it’s a good way to build UIs. I’m almost certainly in the wrong, considering how popular this library seems to be getting, but holy heck that looks like a tedious mess to work with. It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup.

It pushes you to componentize common UI elements. Feel bad to have long utility classes that look like . Change it to: Submit using whatever tooling you prefer. If you don't use this style, maybe you won't like it. I've found it's a waste of time to extract classes for items that are not repeated. And putting utilities in components lightens your "master" CSS file and makes it a lot easier to work with CSS. I've foun…

> It pushes you to componentize common UI elements. Feel bad to have long utility classes that look like . Change it to: Submit using whatever tooling you prefer.

Even when you do that, you're still delivering the long, repetitive mark-up to the browser, rather than relying on the CSS engine to handle this for you. You're making the DOM MUCH MUCH heavier than it needs to be and ignoring the rendering engine that's optimised to handle this role. It seems wasteful all 'round. I confess I'm guessing here, and haven't tested it, but I suspect a simple, axiomic CSS file and simpler HTML file would produce faster rendering than Tailwind, and travel over the network faster.

Tailwind improves the developer experience at the expense of badly optimised code bloating and slowing the user experience. The developer experience benefits are debatable, too: I freaking hate using CSS toolkits and would much rather just write CSS or SASS bespoke to my apps. I have more control and can tailor a solution for the problem.

Re: Play with TailwindCSS in the Browser

#69

Post by stefanfisk »

f3b5 wrote: post #50
rco8786 wrote: post #16

Im sorry but I don’t understand how anyone can look at that and think it’s a good way to build UIs. I’m almost certainly in the wrong, considering how popular this library seems to be getting, but holy heck that looks like a tedious mess to work with. It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup.

Tailwind is a thin wrapper for the people scared of CSS. I use Tailwind at work, and it opened my mind to the benefits of an "ugly" html layout with inline styling. However, being there now, I think that inline CSS offers the better "Tailwind experience" - CSS requires no setup, and learning it properly is a good investment for the future when Tailwind, like so many other frameworks, will inevitably end up on the fro…

how would you use media queries or pseudo selectors in inline CSS?

Re: Play with TailwindCSS in the Browser

#70

Post by aidos »

moray wrote: post #59
pocketsand wrote: post #33

Earlier quoted context omitted.

It pushes you to componentize common UI elements. Feel bad to have long utility classes that look like . Change it to: Submit using whatever tooling you prefer. If you don't use this style, maybe you won't like it. I've found it's a waste of time to extract classes for items that are not repeated. And putting utilities in components lightens your "master" CSS file and makes it a lot easier to work with CSS. I've foun…

That is called Class in CSS...

This is all so played out now.

People that haven't used Tailwind come along and say, "this is silly, just use css". The people who have used it say, "you should try it, it's not what you think."

There are a bunch of subtle differences with Tailwind that make it quite a different experience.

Really, it's closer to inline-styles++ than anything else. The style only applies to the element you're styling. This is by design as it means you can change that one style without wondering what else you've broken across your app.

But you get variations that inline styles can't do (and aren't fun to do in css either): `text-green hover:text-red dark:hover:text-white` (interaction states, light/dark mode, responsive etc etc). This makes a huge difference when you're actually building this stuff.

Personally, from a DX point of view, I really like it. I find it faster than anything else when I'm building and it's easy to debug too; no need to fish for the styles, they're inline on the element I'm styling.

The biggest wart is the inability to functionally build up styles. For example, you have a bunch of js and you need to flip between several different colour states (say for an input that has "disabled | errored | valid | pristene"). There's no great way to force one of your classes to "win" because they're all just classes and the way they were added to the page will determine which border colour wins, for example.

Post reply on HN