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

231–240 of 300 posts

Re: Play with TailwindCSS in the Browser

#231

Post by isleyaardvark »

yen223 wrote: post #30
andiareso wrote: post #21

Earlier quoted context omitted.

I thought the same thing before requiring to use it on an open-source project I was collaborating on.... it changed my mind within a few hours. It is a God send. Like others have said, the selector logic is top-notch and not having to build your own styles is great as they are pre-defined. You can always modify the styles any way you want and add your own custom ones too. It looks "gross", but it's very practical. If…

I've noticed this pattern with Tailwind specifically where people who look at it hate it, but people who tried it love it. I've tried it, and I like it. This phenomenon encourages me to try something out before forming an opinion.

It generally seems like the only objection is “it looks weird” whereas the people who use it invariably say it dramatically improves ease of development and prevention of bugs.

Re: Play with TailwindCSS in the Browser

#232

Post by criswell »

friendlypeg wrote: post #43

Is there a VSCode plugin that help you do something like this: when I type text-20px it will try to find the closest class e.g. text-sm automatically?

Intellisense would help a lot with this task: https://gist.github.com/crswll/db0d276bbf0884b003f3715d48e68...

Re: Play with TailwindCSS in the Browser

#233

Post by krainboltgreene »

deckard1 wrote: post #216
65 wrote: 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…

> it's the future of writing CSS. Tailwind didn't invent utility classes. We've done this since the '90s. > significantly easier to maintain Disagree totally. Utility classes are good for rapid prototyping. But they clutter your code, mix semantics with presentation, and are a pain in the ass when it comes to code reuse. The cascade part of CSS is, believe it or not, actually useful for code reuse. Need to change a f…

Okay so one huge difference between now and the late 90's is that we have several very popular ways to create "components" of HTML/JS/CSS. From react to liveview it's very popular. This is important because it's much easier to maintain.

Re: Play with TailwindCSS in the Browser

#235

Post by andrei_says_ »

fc373745 wrote: post #178
65 wrote: 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…

I think it is already the present for people who don’t want to learn CSS.

I can go as far as using some of its standardized constants in my BEM codebases.

Snark aside, I believe the future of CSS is closer to ITCSS - working with the cascade to minimize the need to modify styles.

Re: Play with TailwindCSS in the Browser

#236

Post by meowtimemania »

andiareso wrote: post #81
the_other wrote: post #72

Earlier quoted context omitted.

> 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. This is true. But if we better taught the cascade and promoted the idea of global styles rather than pretending it's a problem then more people would be better at this and the problems would gently recede. We (the high-en…

But this isn't much different than: extends I'd argue you have less markup to write overall if you are modularizing component logic/styling

One gripe I have with tailwind, is overriding styles is difficult. The .text-blue style will only override .text-gray if it is declared later in the css document.

for example if the corresponding css file is this: .text-blue { color: blue; } .text-gray { color: gray; }

Then in your above example, both Button and CalloutButton will have gray text because .test-gray has higher specificity than .text-blue

Re: Play with TailwindCSS in the Browser

#237

Post by andrei_says_ »

lolinder wrote: post #125
mritchie712 wrote: post #88

Earlier quoted context omitted.

for haters, color management is a good starting example of why it's good. https://tailwindcss.com/docs/customizing-colors

Color management is easy in SCSS, too, though. I just have a _colors.scss file and enforce that no color is ever used that isn't in that file. If I'm working with a designer rather than designing my own UIs, that they have a default color palette isn't helpful, so what do I gain from Tailwind? EDIT: Reading some other comments, I wonder if part of the reason I don't see the utility is that I use Vue, not React. It so…

Including Tailwind’s list of colors in an scss codebase is trivial.

Same for spacing and font sizes if you need these standardized and haven’t done it already.

Which we always did way before tailwind was invented.

Re: Play with TailwindCSS in the Browser

#238

Post by telman17 »

shroompasta wrote: post #179
65 wrote: 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…

Yeah, I've tried tailwindcss, but having many rules of css on one line isn't even at all legible, nor do I want to use horizontal scrolling.

There are formatters for your text editor that can help alleviate some of this.

Re: Play with TailwindCSS in the Browser

#239

Post by inopinatus »

deckard1 wrote: post #216
65 wrote: 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…

> it's the future of writing CSS. Tailwind didn't invent utility classes. We've done this since the '90s. > significantly easier to maintain Disagree totally. Utility classes are good for rapid prototyping. But they clutter your code, mix semantics with presentation, and are a pain in the ass when it comes to code reuse. The cascade part of CSS is, believe it or not, actually useful for code reuse. Need to change a f…

* Tailwind doesn’t claim to have invented utility classes, nor even utility-first CSS architecture.

* HTML has always mixed semantics and presentation.

* It’s terrific for production applications because we don’t lovingly hand-craft each DOM node. Far from being an enemy of reuse, it enables refactoring at the point of HTML generation, and aligns particularly well with partials and view helper functions/objects.

* The cascade is still there; you’re not fucked. Not even if you’ve been suckered into using some react-like framework.

Post reply on HN