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

341–350 of 448 posts

Re: Tailwind CSS v3.0

#341

Post by Toine »

JasonCannon wrote: post #307
pier25 wrote: post #252

Earlier quoted context omitted.

Doesn't that negate most of the benefits of using Tailwind in the first place?

Not at all. You design and iterate on the button using the individual classes, then you swap them out for a concise class once you are done. It's how tailwind is designed to be used. https://tailwindcss.com/docs/reusing-styles Although I realize in looking this up in the documentation to show you, it's actually @apply and not @extend you are supposed to use.

Using @apply is the ultimate last resort though.

Re: Tailwind CSS v3.0

#342

Post by tomcooks »

seanwilson wrote: post #121
z3t4 wrote: post #101

Earlier quoted context omitted.

The trick with CSS is to write semantic HTML and avoid div, span and css classes. You can of course inline css too (used mostly for optimization to prevent layout shift, but is also fine for elements/classes that are not repeated, such as the top menu, top banner/intro and header/footer)

> The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. No large website today works otherwise. HTML is still semantic when it contains styling markup (in the sense that a computer can read and understand the stru…

Not eparating concerns also fails VERY hard, but that bites you in the arse when you least expect or want it (unlike writing good CSS which takes only patience and studying).

There's a reason why inline styles and important! were to be avoided

Re: Tailwind CSS v3.0

#343

Post by jbergens »

montroser wrote: post #246
ggregoire wrote: post #182

Earlier quoted context omitted.

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

If you a 100 different types of buttons I can see your problem, if it is more like 5 then you just create them first and then makes the code more DRY.

For example when using React you can create 5 button components first and the refactor your code to make the 5 buttons use/call a generic button. Or have 2 generic buttons if the combinations are hard to handle. The thing with atomic CSS like Tailwind is that it very easy to quickly create a few different buttons.

Re: Tailwind CSS v3.0

#344

Post by jbergens »

peterkelly wrote: post #318

I've never used Tailwind CSS. I watched the video "Just-In-Time: The Next Generation of Tailwind CSS" and all of it seems like they're solving problems that are entirely of their own creation, and doing so in an impressively complex way. The use case demonstrated was suppose you have a twitter button on your site, and it has to have a background color of #1da1f2 because that is Twitter's brand color. Instead of writi…

I think this video talks a bit about how Tailwind can be used efficiently.

https://youtu.be/nqNIy8HkEQ8

Re: Tailwind CSS v3.0

#345

Post by jbergens »

ahallock wrote: post #266

I've been working with CSS for over twenty years, and Tailwind is the way forward for me. Some of the big benefits are: * No more worrying about naming class selectors. This frees up so much cognitive space. The less you have to worry about naming the better. I used the SUIT CSS naming convention before, which allows a mix, and that just creates friction. You need the same level of abstraction all the way through. *…

I can just add that WindiCss is worth testing. In my small trials it worked a lot better than Tailwind with jit. Windi with Vite gives me a really fast dev experience.

We'll see if UnoCss takes over.

Re: Tailwind CSS v3.0

#346

Post by nsonha »

z3t4 wrote: post #101
seanwilson wrote: post #50

I used the JIT version recently on a new landing page with code completion for class names in my IDE and found it great. The distance between what I'm picturing in my head and what I have to type to see that on the screen felt so much shorter and less fatiguing than the standard CSS approach. With the regular way, to style something that's probably not going to appear elsewhere, I'm having to: come up with class name…

The trick with CSS is to write semantic HTML and avoid div, span and css classes. You can of course inline css too (used mostly for optimization to prevent layout shift, but is also fine for elements/classes that are not repeated, such as the top menu, top banner/intro and header/footer)

what does semantic html has anything to do with css. Doesn't this make the look and feel of the page easily break on any change on the markup structure and content?

Also does this comment even has a point? Like if we do what you suggest then no need of tailwind?

Re: Tailwind CSS v3.0

#347

Post by nsonha »

Toutouxc wrote: post #180
seanwilson wrote: post #121

Earlier quoted context omitted.

> The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. No large website today works otherwise. HTML is still semantic when it contains styling markup (in the sense that a computer can read and understand the stru…

> CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling Totally this. We say we've come a long way from using tables for layout, but for example you still can't use Flexbox without at least some non-semantic .stuff-container and .radio-with-label junk. Decoupled HTML and CSS have failed in the real world, outside of pet projects…

I think grid is that powerful

Re: Tailwind CSS v3.0

#348

Post by jeppester »

lhorie wrote: post #230
seanwilson wrote: post #50

I used the JIT version recently on a new landing page with code completion for class names in my IDE and found it great. The distance between what I'm picturing in my head and what I have to type to see that on the screen felt so much shorter and less fatiguing than the standard CSS approach. With the regular way, to style something that's probably not going to appear elsewhere, I'm having to: come up with class name…

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

We recently started using a combination of tailwind and BEM instead of bootstrap.

It means that we can have our own custom "button button--sm" classes - a single place to change general styling - and on top of that get all flexibility of the tailwind utils for edge cases.

I don't think it's perfect, but it's so far much more flexible than bootstrap, and we don't need to duplicate loads of classes for each similar component.

Re: Tailwind CSS v3.0

#349

Post by meerita »

lhorie wrote: post #230
seanwilson wrote: post #50

I used the JIT version recently on a new landing page with code completion for class names in my IDE and found it great. The distance between what I'm picturing in my head and what I have to type to see that on the screen felt so much shorter and less fatiguing than the standard CSS approach. With the regular way, to style something that's probably not going to appear elsewhere, I'm having to: come up with class name…

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

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

It doesn't matter, you can have an entire newspaper and perfectly done in functional css with incredible results without having to mastermind any architecture.

http://minid.net/2019/08/12/in-defense-of-functional-css/

Re: Tailwind CSS v3.0

#350

Post by meerita »

jeppester wrote: post #348
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…

We recently started using a combination of tailwind and BEM instead of bootstrap. It means that we can have our own custom "button button--sm" classes - a single place to change general styling - and on top of that get all flexibility of the tailwind utils for edge cases. I don't think it's perfect, but it's so far much more flexible than bootstrap, and we don't need to duplicate loads of classes for each similar com…

Why would you need a button class when you can have that button in a component?
Post reply on HN