Live data from Hacker News

Play with TailwindCSS in the Browser

play.tailwindcss.com

201–210 of 300 posts

Re: Play with TailwindCSS in the Browser

#201
post #80

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future…

[deleted]

Re: Play with TailwindCSS in the Browser

#202
post #150
post #80

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future…

I've seen this exact comment so many times over the past year or two that I think it's finally time that I try it out.

I was where you were and am glad I got over my reticence because it's genuinely feels like a pleasure to use now. Another good aspect is that while you're using tailwind's custom identifiers, you still have to write real CSS and so are quite likely to end up refining your own CSS skillset in the process.

Re: Play with TailwindCSS in the Browser

#203
post #40

Earlier quoted context omitted.

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

It seems like the main advantage of tailwind is that you don't have to learn how CSS cascading and specificity works, which is a fair advantage as most frontend developers I talk to don't even realise that specificity is a thing. I don't see the advantage over inline style tho. I see abbreviations as a disadvantage as its just as fast to type background as it is bg but background is clearly more intelligible. How do…

Tailwind has a lot of advantages if you read the documentation rather than conjecture about what you think it might do.

Re: Play with TailwindCSS in the Browser

#204
post #80

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future…

I completely disagree. To fix the css + jsx in one file, just write your styled components at the bottom of your component. If you ever seen a react component completely riddled with Tailwind, you'll realize how messy and uncoordinated it looks. Even I would consider switching between two files just to avoid that style of css. Furthermore the necessity to utilize horizontal scroll because adding 10+ more rules will i…

You seem to miss the bigger point - Tailwind constraint your css use so that you don't imagine stuff in ad-hoc manner.

And you can split, and sort classes with editor plugins which makes it almost equally good as your example.

Re: Play with TailwindCSS in the Browser

#205
post #190

Earlier quoted context omitted.

I completely disagree. To fix the css + jsx in one file, just write your styled components at the bottom of your component. If you ever seen a react component completely riddled with Tailwind, you'll realize how messy and uncoordinated it looks. Even I would consider switching between two files just to avoid that style of css. Furthermore the necessity to utilize horizontal scroll because adding 10+ more rules will i…

You can do both of those things with Tailwind. Put the css only components at the bottom and use them in your main component if you want. Break the classes over multiple lines if you want. The difference between your 2 examples is that TW allowed you to handle media queries seamlessly but you couldn't do that in your styles example.

[deleted]

Re: Play with TailwindCSS in the Browser

#206
post #190

Earlier quoted context omitted.

I completely disagree. To fix the css + jsx in one file, just write your styled components at the bottom of your component. If you ever seen a react component completely riddled with Tailwind, you'll realize how messy and uncoordinated it looks. Even I would consider switching between two files just to avoid that style of css. Furthermore the necessity to utilize horizontal scroll because adding 10+ more rules will i…

You can do both of those things with Tailwind. Put the css only components at the bottom and use them in your main component if you want. Break the classes over multiple lines if you want. The difference between your 2 examples is that TW allowed you to handle media queries seamlessly but you couldn't do that in your styles example.

i'm not sure what you mean by 'seamlessly'

but a media query in styled components would just be

    @media (max-width: 700px) {
        css here
    }
it's not that much harder.

Also, the lack of address of real problems of tailwindcss of OPs comment in terms of mantainability is something you consider.

reading iteratively from left to right especially if it has 10+ css rules, in terms of legibility, is not really all too great.

I would absolutely hate to adjust something in tailwindcss, after not seeing the codebase in a month's time.

Whereas regular css properties, i can easily find by eye.

Re: Play with TailwindCSS in the Browser

#207

Earlier quoted context omitted.

I completely disagree. To fix the css + jsx in one file, just write your styled components at the bottom of your component. If you ever seen a react component completely riddled with Tailwind, you'll realize how messy and uncoordinated it looks. Even I would consider switching between two files just to avoid that style of css. Furthermore the necessity to utilize horizontal scroll because adding 10+ more rules will i…

You seem to miss the bigger point - Tailwind constraint your css use so that you don't imagine stuff in ad-hoc manner. And you can split, and sort classes with editor plugins which makes it almost equally good as your example.

i think you missed his point to be honest.

Regardless of where place your tailwindcss or where you split / sort classes, reading iteratively from left to right, especially if the css rules are numerous, is not legible.

just looking at the two examples above, and already I can tell how much it would be easier to maintain verbose css.

Re: Play with TailwindCSS in the Browser

#208
post #58
post #38

Earlier quoted context omitted.

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.

Oooo. That’s an interesting idea. Being able to toggle className to be `className=“…”` in vim. Would be interesting to see what an experience of being able to toggle between classless and class-only jsx looked like.

That would make it more appealing for me. Just saw this proposal:

"Add the option to hide class attribute in vscode plugin" https://github.com/tailwindlabs/tailwindcss/discussions/7922

Re: Play with TailwindCSS in the Browser

#209

Earlier quoted context omitted.

> Have you ever had to change the company's look and feel with anything else than tailwind? Yes, many times, with normal CSS. It's basically the point of cascading style sheets. Sticking to proper class names and elements makes reskinning a breeze.

Crazy, in my entire career I've never been involved in a redesign that didn't involve the entire layout but only changed some colors, paddings and drop shadows.

Definitely done it a bunch of times. Marketing comes out with some new web font crap they want and we need to go adjust everything. Flat face buttons become popular so we get rid of the pseudo 3d ones. They want to launch a new webstore but dont want to redesign, lets just steal one we have and reskin it a bit.

Re: Play with TailwindCSS in the Browser

#210
This is awesome. I did see this dropped right alongside Tailwind V3, or there abouts.

One thing I wish Tailwind did with production builds is take all those CSS classes and run them through a css-modules transpiler. If they can detect the names in the files, can't they also use the same lexer to do replacements on the code too?

That would be the ultimate efficiency, in terms of bytes saved.

Post reply on HN