4 ms·

The missing bit of context here is that you use components to create re-usable abstractions. If I want to change the color of my buttons, I go change the "inli

The missing bit of context here is that you use components to create re-usable abstractions. If I want to change the color of my buttons, I go change the "inline CSS" of the Button component I am using everywhere, and it changes everywhere.

peer2pay 3y ago
Sorry for being pedantic but that’s not components that’s just global classes. Bootstrap anyone?
- watwut 3y ago
  Harder to use and maintain then tailwind.
- steveklabnik 3y ago
  Nobody said that Tailwind is something super special and there's only one way to do this. I find it nicer than hand-writing global classes. YMMV. My point is just that "If I want five buttons to change, I have to go find five places to edit it" isn't the reality of working with the tool in its intended way.
  - threatofrain 3y ago
    [deleted]
- dcre 3y ago
  No, literal React (or Vue or Svelte) Components. Not like making global classes.
- dutchCourage 3y ago
  The idea is similar, but a component contains markup and logic on top of the styles. The approach Tailwind takes is that since the component is named and contained, its elements don't have to be named explicitly. And while we could then use inline CSS, it has some limitations so utility classes are a more powerful tool.
timeon 3y ago
On the other if you have used something like Svelte or Vue, then there would not be need for "inline CSS".
- steveklabnik 3y ago
  I would be interested in hearing more. In my understanding, these tools aren’t inherently contradictory, though I do see some folks agreeing with you.
  - dcre 3y ago
    I think they mean that because Svelte lets you put a style tag in a component and the styles are automatically scoped to that component, you don’t need Tailwind. https://svelte.dev/examples/styling https://svelte.dev/examples/styling I’d say that goes halfway toward solving the problem Tailwind solves and could well be enough for most people. It’s nice not to go to a different file, and it’s nice to get scoping. But you still have to come up with class names, and you still have to mentally match up what classes go where.

peer2pay 3y ago

Sorry for being pedantic but that’s not components that’s just global classes. Bootstrap anyone?

watwut 3y ago
Harder to use and maintain then tailwind.
steveklabnik 3y ago
Nobody said that Tailwind is something super special and there's only one way to do this. I find it nicer than hand-writing global classes. YMMV. My point is just that "If I want five buttons to change, I have to go find five places to edit it" isn't the reality of working with the tool in its intended way.
- threatofrain 3y ago
  [deleted]
dcre 3y ago
No, literal React (or Vue or Svelte) Components. Not like making global classes.
dutchCourage 3y ago
The idea is similar, but a component contains markup and logic on top of the styles. The approach Tailwind takes is that since the component is named and contained, its elements don't have to be named explicitly. And while we could then use inline CSS, it has some limitations so utility classes are a more powerful tool.

timeon 3y ago

On the other if you have used something like Svelte or Vue, then there would not be need for "inline CSS".

steveklabnik 3y ago
I would be interested in hearing more. In my understanding, these tools aren’t inherently contradictory, though I do see some folks agreeing with you.
- dcre 3y ago
  I think they mean that because Svelte lets you put a style tag in a component and the styles are automatically scoped to that component, you don’t need Tailwind. https://svelte.dev/examples/styling https://svelte.dev/examples/styling I’d say that goes halfway toward solving the problem Tailwind solves and could well be enough for most people. It’s nice not to go to a different file, and it’s nice to get scoping. But you still have to come up with class names, and you still have to mentally match up what classes go where.