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

321–330 of 448 posts

Re: Tailwind CSS v3.0

#321

Post by jeremydw »

mping wrote: post #319
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…

You miss the point. Using the style attribute everywhere causes duplication; using css classes can quickly lead to bloat where you have lots of unused classes. This is a way of paying only for what you actually use.

I don't think this is quite right.

I'm not a tailwind user but I think the following:

``` Foo Bar Baz ```

gets generated to:

```html Foo Bar Baz ```

```css .flex { display: flex; } ```

If we replaced this with `style` attribute usage, you'd get:

``` Foo Bar Baz ```

Assuming the content is gzipped when transferred (a good assumption), the non-Tailwind version's payload is smaller because there are no separate CSS definitions.

Your statement is true in the general sense (a page can easily load unused CSS with other CSS/styling approaches) but I don't think it's correct to say that using Tailwind results in smaller payloads vs. using style attributes.

Re: Tailwind CSS v3.0

#322

Post by bcrosby95 »

mping wrote: post #319
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…

You miss the point. Using the style attribute everywhere causes duplication; using css classes can quickly lead to bloat where you have lots of unused classes. This is a way of paying only for what you actually use.

So the benefit of tailwind is not having to write "background-color". Got it. I don't know if its worth learning yet another framework for that.

Re: Tailwind CSS v3.0

#323

Post by jeremydw »

bcrosby95 wrote: post #322
mping wrote: post #319

Earlier quoted context omitted.

You miss the point. Using the style attribute everywhere causes duplication; using css classes can quickly lead to bloat where you have lots of unused classes. This is a way of paying only for what you actually use.

So the benefit of tailwind is not having to write "background-color". Got it. I don't know if its worth learning yet another framework for that.

Someone should make a compiler that converts inline styles to Tailwind so then you don't have to learn Tailwind but can still use Tailwind.

For example it can convert `` to ``. Perfect! (Yes, "bg-white" is the Tailwind way to make the background color white.)

Re: Tailwind CSS v3.0

#324

Post by luisrudge »

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…

Alright. Now add a media query to change the button size based on the device size. Or maybe use a different color on hover. You can’t do that with inline styles.

Re: Tailwind CSS v3.0

#325

Post by aaronbrethorst »

stanislavb wrote: post #315
aaronbrethorst wrote: post #277

Earlier quoted context omitted.

I use Tailwind utility classes extensively to create reusable components in a Rails app using GitHub's ViewComponent gem ( https://viewcomponent.org ) Occasionally, I'll use @apply directives to DRY up something that isn't easy to encapsulate at the component level, but 95% of the time, I can easily get by with utility classes. I try to avoid using hyperbolic-sounding language like 'revolutionized,' but Tailwind + Vi…

Thanks mate! I've been considering this path and may give it a go. Although, I'm still a bit nervous spitting utility classes all around. That sounds almost like inline CSS and almost unmaintainable.

I had the same concern at first. I remained skeptical during my first couple days working with Tailwind, but came around pretty soon thereafter.

I realized that all of my semantic CSS classes might as well have been inline CSS for all the good they were doing me on reusability. Utility classes are faster to work with, and, as long as you’re componentizing everything, still going to give you consistent styles across your product.

Re: Tailwind CSS v3.0

#326

Post by toomanydoubts »

bcrosby95 wrote: post #322
mping wrote: post #319

Earlier quoted context omitted.

You miss the point. Using the style attribute everywhere causes duplication; using css classes can quickly lead to bloat where you have lots of unused classes. This is a way of paying only for what you actually use.

So the benefit of tailwind is not having to write "background-color". Got it. I don't know if its worth learning yet another framework for that.

Yet again, inline css has no support for media-queries, pseudo elements, states(hover, visited, active). Tailwind does. Tailwind also works as a design system, limiting you to a predefined font-sizes, spacing, etc. generating a consistent look-and-feel that requires discipline to do with inline styles.

Re: Tailwind CSS v3.0

#327

Post by jacquesm »

luisrudge wrote: post #324
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…

Alright. Now add a media query to change the button size based on the device size. Or maybe use a different color on hover. You can’t do that with inline styles.

You shouldn't need to do any of this in the first place if you followed the original recommendations for the WWW.

Re: Tailwind CSS v3.0

#328

Post by johnfn »

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…

The point of tailwind - well, one of them, anyways - is to provide sensible defaults. You then snap those sensible defaults together and have good looking UIs without a lot of effort. The square bracket notation is a fallback for rare cases when those defaults aren’t applicable.

Re: Tailwind CSS v3.0

#330

Post by ereveles »

docmars wrote: post #298
danielvaughn wrote: post #253

Earlier quoted context omitted.

I used Emotion for a few years (CSS-in-JS). I was so in love with it that I never thought I'd change to something else. But Tailwind converted me. I can't go back either, it's too powerful.

You can use both and gain the benefits of Tailwind-in-JS to dynamically apply utilities and arrays/objects of utilities composed together, all using a nifty wrapper library called "twin.macro". It sits on top of Styled Components or Emotion (your choice), and uses your project's Tailwind config faithfully, minus a few of the plugin features. It eliminates the need for JIT or PurgeCSS because it compiles Tailwind's ut…

+1, tried Tailwind and liked it, but when I found I was able to use CSS-in-JS with it with twin.macro i was amazed. Now is used on all my side projects.
Post reply on HN