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

31–40 of 300 posts

Re: Play with TailwindCSS in the Browser

#31

Post by seabea »

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'm really tired of needing to wade through these sort of comments. This is not a unique criticism.

If you don't don't get it, either try it out or move on.

These comments add no value to the conversation.

Re: Play with TailwindCSS in the Browser

#32

Post by peterkelly »

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.

Any time spent learning tailwind is much better invested in learning plain CSS, since it's basically just syntactic sugar for style attributes. And learning CSS itself will be useful for many years to come, well beyond the lifetime of any given framework.

The browser's built-in CSS support is the framework, I don't understand why people try to build things like this on top of it unless they're adding real value.

Re: Play with TailwindCSS in the Browser

#33

Post by pocketsand »

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 found that the "cascading" part of style sheets almost always breaks down in larger projects. Small components seem to avoid those breakdowns while allowing for reusability.

Re: Play with TailwindCSS in the Browser

#34

Post by sph »

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.

The usual answer, however trite, is "don't knock it till you've tried it."

I haven't found a convincing explanation of why exactly this is better until I've used it in a project, and since then I'm completely sold. The semantic CSS concern separation pipe dream has always been snake oil in real projects.

Long live Tailwind.

Re: Play with TailwindCSS in the Browser

#35

Post by jonwinstanley »

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 totally thought this until I started using it on a full project. Six months in and I can't imagine writing traditional CSS or nested SASS classes anymore.

Combined with either Flexbox or CSS Grid, the speed with which you can put together a good looking web page is crazy fast.

Re: Play with TailwindCSS in the Browser

#36

Post by pocketsand »

peterkelly wrote: post #32
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.

Any time spent learning tailwind is much better invested in learning plain CSS, since it's basically just syntactic sugar for style attributes. And learning CSS itself will be useful for many years to come, well beyond the lifetime of any given framework. The browser's built-in CSS support is the framework, I don't understand why people try to build things like this on top of it unless they're adding real value.

It's really not just syntatic sugar for style.

It's a design system as well as a set of utility classes. Consider the difference between

Gray text and Gray text

In the former, you can't just redefine what gray means. You've hard set it to a value you need to keep track of and keep consistent. On the right, you can configure what "700" means, switch between a cool gray or a blue gray, etc.

Re: Play with TailwindCSS in the Browser

#37

Post by clementmas »

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 gave it a shot and now I like it. I don't have to add classes to my HTML and separate my CSS. I find it more maintainable. The built-in config and colors are also quite good.

Re: Play with TailwindCSS in the Browser

#38

Post by enobrev »

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 wasn't a big fan of the idea before trying it and then I tried it for a small project. I get the appeal, but as the project grew in complexity, I found I disliked managing tailwind

But the experience while writing the code is pretty excellent. It made me realize that what I really want (personally) is to have my css inlined in my editor when writing / editing it, and otherwise remain out of the way in my css file.

Re: Play with TailwindCSS in the Browser

#39

Post by jonwinstanley »

agloeregrets wrote: post #18
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’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. In my experience, tailwind is pretty close to the real CSS properties. What I found to be wonderful and freeing about it is that it stops the middle step of engineering and naming classes and naming elements with class names and let's you just do styling. There's al…

CSS has special syntax for media queries, hover states, dark mode etc. If anything, once you are into it Tailwind is far more "guessable".

Re: Play with TailwindCSS in the Browser

#40

Post by onion2k »

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’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.

That's exactly what it is.

But... you have to do that regardless of what you use for CSS layout. If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remember what you called them. Hopefully you're good at that and you can remember, else you'll duplicate things. Hopefully your entire team are aligned on the same naming conventions, or your project's styles will be a total mess.

Maybe you'll use styled-components or another CSS-in-JS solution, which helps a bit by making your styles scoped to components so they don't interfere with things outside of where they should, but then you'll have to keep a set of constants to use across all of them anyway, which puts you back at the same problem as plain CSS - you need to remember what's been set, and not duplicate things.

Ultimately, Tailwind is a really well designed abstraction of inline styles that means you don't have to worry about inconsistency and duplication of things any more. It's another thing to learn but because it's so similar to raw CSS it's not actually a lot of effort. It works well.

Post reply on HN