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

Tailwind CSS v3.0

tailwindcss.com

Post reply on HN
Print view View original

241–250 of 448 posts

Re: Tailwind CSS v3.0

#241

Post by mgkimsal »

Yzupnick wrote: post #219
seanwilson wrote: post #188

Earlier quoted context omitted.

Now without modifying the HTML, how would I get the author's name only to appear on the right of the author image with the other text underneath? And add a line break before the company name? And make the word "tiny" use a small font? And if you need to modify the HTML, were the extra tags added 100% only for semantic reasons and not for presentation reasons?

I often have trouble writing CSS. Here is how I approached this challenge. https://jsfiddle.net/mwabc719/ Anyone have good advice on a better way?

You modified the HTML. And... I didn't see the output described in the parent in your fiddle. ?

Re: Tailwind CSS v3.0

#242

Post by chrysoprace »

I've always been a bit apprehensive of Tailwind but with the latest JIT compiler it actually seems usable. I'm happy to see it getting more use for mainstream applications but I wish it wasn't the "default" for a lot of open source projects.

For example, several of the next.js examples[1] use tailwind without explicitly stating so, because I guess it's just become a ubiquitous as css stylesheets or modules for some people. The problem I find is that it adds opinion and mental overhead for people learning related technologies or trying to get a head start without an opinionated styling solution. In order to use something like the blog-starter example for next.js I have to go and learn tailwind and then come back before I can use their blog starter, where as CSS is universal. CSS works with every project, without depending on Tailwind.

Anyway, looking forward to seeing newer improvements to Tailwind, but I hope that people will consider it an alternative to something like Bootstrap instead of an alternative to CSS.

[1] https://github.com/vercel/next.js/tree/canary/examples/blog-...

Re: Tailwind CSS v3.0

#243

Post by ipaddr »

Mizza wrote: post #77

I've been a Bootstrap user for a long time, but I recently made the jump to Tailwind. It's not the revolutionary upgrade I was hoping for, but it's nice evolutionary step in the right direction. It's quite intuitive, but it doesn't get rid of most of the frustrations that come from doing layouts, as those come from the design of CSS itself. `@apply` makes the upgrade worth it though, it's easy to make custom classes…

Just started with tailwinds and similiar thoughts. A framework like this without components.

Try daisyui as a tailwinds plugin. It comes with the missing components. It also allows you to replace your 80 character style for buttons with btn btn-primary.

Re: Tailwind CSS v3.0

#244

Post by Klonoar »

stevebmark wrote: post #96

I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind wo…

I don't personally care for Tailwind, but I get the reasoning why people gravitate towards it: just as modern JS moved away from inheritance to composition, so is CSS.

There's a fundamental argument that inheritance is a mirage and things in large projects become much simpler with composition-based approaches. You don't really need to grok the inheritance chain with Tailwind in the same way you do typical CSS.

For my personal projects I'd continue writing my own CSS... but for teams, I'd go to Tailwind without a second thought.

Re: Tailwind CSS v3.0

#245

Post by [deleted] »

commanderkeen08 wrote: post #238

Every time Tailwind does something great and gets posted here, the conversation devolves into the same arguments: “I don’t get it. It’s just inline styles.” What is it about CSS that gets people so offended and opinionated? If it were a new JS framework, few people would be saying “I just don’t get XYZ. Use React”. Is it because Tailwind is so drastically different and breaks people’s core ideas about separation of c…

[deleted]

Re: Tailwind CSS v3.0

#246

Post by montroser »

ggregoire wrote: post #182
JasonCannon wrote: post #175

Earlier quoted context omitted.

>This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore. That app is done wrong.…

Or make a Button component in your framework of choice. function Button = ({ children }) => {children} Create Edit // Same style Delete // Same style

No, we don't want all of the buttons to look identical.

Some are big and some are small; some are bold and primary and some are muted and secondary; some have icons; some have shadows; some are disabled, etc, etc.

It's easy to make them identical. The challenge is to be as flexible as necessary in a mature application, while minimizing verbosity and complexity.

In my experience Tailwind hurts more than it helps here. It forces you to use your component system to abstract things which otherwise wouldn't warrant the extra level of indirection.

Re: Tailwind CSS v3.0

#247

Post by lhorie »

dqv wrote: post #239
lhorie wrote: post #230

Earlier quoted context omitted.

> I used the JIT version recently on a new landing page Yeah, that's kinda the poster child use case for Tailwind and similar frameworks. Landing pages are all about being jazzy and unique and eye catching, and not so much about code reusability/composability. Where it gets less fun is when you want widget consistency across multiple areas of a site and across design tweaks over time, since now you have to deal with…

Looks like Tailwind has an answer to this: @apply. https://tailwindcss.com/docs/reusing-styles I am going to give it a try. The argument against using it is that it defeats the purpose of Tailwind, but I think its useful to start by spraying classes until things work and then moving those classes into e.g. btn-primary once the styles become stable and need universality.

Yes, @apply exists, but is generally discouraged (and the rationales are given right on that page)

> If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you

Approaching it with moderation is probably worth trying though

Re: Tailwind CSS v3.0

#248

Post by dalmo3 »

adamwathan wrote: post #194
___q wrote: post #89

Earlier quoted context omitted.

Well that's easy, silly! Sign in A real joy compared to writing CSS, lemme tell ya.

It's fewer than half as many characters as writing the same thing in CSS: .btn { display: inline-flex; justify-content: center; padding: 8px 16px; border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); font-size: 14px; border-radius: 6px; color: #fff; background-color: rgb(79 70 229); } .btn:hover { background-color: rgb(67 56 202); outline: 2px dotted transparent; outline-offset: 2px; box-shadow:…

And in 1/10th as many keystrokes with the vscode extension and autocomplete. Well done my friend.

Re: Tailwind CSS v3.0

#249

Post by keyle »

montroser wrote: post #234
tlamponi wrote: post #98

Earlier quoted context omitted.

Sounds a bit like a glorified ... ?

Yes, or now with Tailwind v3.0 you can write that as ... I wish I were being hyperbolic, but alas, no: https://tailwindcss.com/blog/tailwindcss-v3#arbitrary-proper...

Excuse my dad joke "There is a lot of wind at the end of that tail"!
Post reply on HN