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…
Play with TailwindCSS in the Browser
201–210 of 300 posts
Re: Play with TailwindCSS in the Browser
#202I 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.
Re: Play with TailwindCSS in the Browser
#203Earlier 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…
Re: Play with TailwindCSS in the Browser
#204I 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…
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
#205Earlier 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.
Re: Play with TailwindCSS in the Browser
#206Earlier 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.
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
#207Earlier 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.
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
#208Earlier 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.
"Add the option to hide class attribute in vscode plugin" https://github.com/tailwindlabs/tailwindcss/discussions/7922
Re: Play with TailwindCSS in the Browser
#209Earlier 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.
Re: Play with TailwindCSS in the Browser
#210One 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.