5 ms·

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

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 writing style="background-color: #1da1f2" like a normal person they have a class name called bg-[#1da1f2], and their "JIT compiler" generates a named class with that property. In another part of the video, they use className="font-bold" instead of style="font-weight: bold". Apparently the advancement in this version is that instead of having all of those pre-defined classes they only generate the ones you actually use. The feature list for 3.0 includes the ability to use any color you want, and even arbitrary CSS properties that the framework doesn't explicitly know about. Is this progress? I could use the style attribute in 1999.

luisrudge 5y ago
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.
- jacquesm 5y ago
  You shouldn't need to do any of this in the first place if you followed the original recommendations for the WWW.
  - papertokyo 5y ago
    Use cases and expectations have changed somewhat in the last few decades.
mping 5y ago
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.
- jeremydw 5y ago
  I don't think this is quite right. I'm not a tailwind user but I think the following: ``` <div class="flex">Foo</div> <div class="flex">Bar</div> <div class="flex">Baz</div> ``` gets generated to: ```html <div class="flex">Foo</div> <div class="flex">Bar</div> <div class="flex">Baz</div> ``` ```css .flex { display: flex; } ``` If we replaced this with `style` attribute usage, you'd get: ``` <div style="display: flex">Foo</div> <div style="display: flex">Bar</div> <div style="display: flex">Baz</div> ``` 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.
- bcrosby95 5y ago
  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.
  - jeremydw 5y ago
    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 `<div style="background-color: white">` to `<div class="bg-white">`. Perfect! (Yes, "bg-white" is the Tailwind way to make the background color white.)
  - toomanydoubts 5y ago
    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.
johnfn 5y ago
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.
deleted 5y ago
[deleted]
shepherdjerred 5y ago
I like Tailwind, but I felt the same thing. Tailwind definitely solves a problem for me. I don’t like writing CSS, and Tailwind serves a (very) thin abstraction layer. I don’t have to worry about reusing CSS, figuring out how to name my classes, or what CSS selector I need. I guess these features are helpful, but they’re hilarious to read. “Arbitrary color support” is a release note you’d see in the 90’s
tekkk 5y ago
Well using square brackets is kinda not preferred with Tailwind. You'd rather use something like `bg-blue-400`. And even from your example you see that you are writing less styles. I agree that going outside what Tailwind provides is kinda non-optimal but in general it provides nice building blocks that makes keeping the design consistent easier. I was in the Tailwind is dumb camp also until I tried it. Then I realized I can ship my own prototypes faster because I wont waste time fine-tuning margins or picking colors. It isn't perfect of course but nice when speed is your top-priority.
jbergens 5y ago
I think this video talks a bit about how Tailwind can be used efficiently. https://youtu.be/nqNIy8HkEQ8 https://youtu.be/nqNIy8HkEQ8
sbergot 5y ago
In case you haven't seen it this is an explanation that is worth reading: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...

luisrudge 5y ago

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.

jacquesm 5y ago
You shouldn't need to do any of this in the first place if you followed the original recommendations for the WWW.
- papertokyo 5y ago
  Use cases and expectations have changed somewhat in the last few decades.

mping 5y ago

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.

jeremydw 5y ago
I don't think this is quite right. I'm not a tailwind user but I think the following: ``` <div class="flex">Foo</div> <div class="flex">Bar</div> <div class="flex">Baz</div> ``` gets generated to: ```html <div class="flex">Foo</div> <div class="flex">Bar</div> <div class="flex">Baz</div> ``` ```css .flex { display: flex; } ``` If we replaced this with `style` attribute usage, you'd get: ``` <div style="display: flex">Foo</div> <div style="display: flex">Bar</div> <div style="display: flex">Baz</div> ``` 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.
bcrosby95 5y ago
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.
- jeremydw 5y ago
  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 `<div style="background-color: white">` to `<div class="bg-white">`. Perfect! (Yes, "bg-white" is the Tailwind way to make the background color white.)
- toomanydoubts 5y ago
  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.

johnfn 5y ago

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.

deleted 5y ago

[deleted]

shepherdjerred 5y ago

I like Tailwind, but I felt the same thing. Tailwind definitely solves a problem for me. I don’t like writing CSS, and Tailwind serves a (very) thin abstraction layer. I don’t have to worry about reusing CSS, figuring out how to name my classes, or what CSS selector I need. I guess these features are helpful, but they’re hilarious to read. “Arbitrary color support” is a release note you’d see in the 90’s

tekkk 5y ago

Well using square brackets is kinda not preferred with Tailwind. You'd rather use something like `bg-blue-400`. And even from your example you see that you are writing less styles. I agree that going outside what Tailwind provides is kinda non-optimal but in general it provides nice building blocks that makes keeping the design consistent easier. I was in the Tailwind is dumb camp also until I tried it. Then I realized I can ship my own prototypes faster because I wont waste time fine-tuning margins or picking colors. It isn't perfect of course but nice when speed is your top-priority.

jbergens 5y ago

I think this video talks a bit about how Tailwind can be used efficiently. https://youtu.be/nqNIy8HkEQ8 https://youtu.be/nqNIy8HkEQ8

sbergot 5y ago

In case you haven't seen it this is an explanation that is worth reading: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...