5 ms·

I disagree with the main motivations and benefit. For me it’s always been about being able to handle hover states etc without having to leave the local context

by aidos 2y ago

I disagree with the main motivations and benefit. For me it’s always been about being able to handle hover states etc without having to leave the local context where I’m working. I don’t think anyone can really write tailwind without understanding css.

franga2000 2y ago
Adobe Brackets had an interesting solution to the context switching problem. There was a keybind, I think CTRL+E, that would let you edit all the styles that apply to the current element in a kind of inline sub-editor. It was quite neat and I haven't seen it done in any other editor.
spankalee 2y ago
You didn't have to leave the local context if you use very local stylesheets. Scoped CSS like shadow DOM, plus CSS text right with your component, helps a lot with this.
- wruza 2y ago
  Style attribute lacks a selector (“color:red” vs. “.comp {color:red}”), forbidding the most useful use case. Shadow dom is an inspection nightmare used only by a few progressive web purists. Style.css is an untyped incoherent spaghetti. There’s no really good place for an element style in current implementation.
  - krsdcbl 2y ago
    op is not talking about style atts, but referring to nesting inline `<style> @scope { ... }</style>` to declare vanilla css in the scope & context of specific DOM nodes
    - wruza 2y ago
      Isn’t it a “limited availability” feature? Why would they use it?
    - paulddraper 2y ago
      Yeah, but `@scope` is only if you don't want to support Firefox.
    - spankalee 2y ago
      No, in taking about the native scoping you get with shadow DOM, which is awesome and not an "inspection nightmare".
krsdcbl 2y ago
if the styles only concern the context you work on, this could easily be done with vanilla scoped inline styles If those declarations are relevant to multiple components within your codebase, then you'll still need to leave the context when your styles are inlined and therefore declared in multiple places
- aidos 2y ago
  No. That’s the point of tailwind. You can include things like hover states. Inline css hits a roadblock there and you’re forced to go out to a style tag. Then you have to start naming things. Then you risk conflicts. That’s the problem tailwind solves.

by aidos 2y ago

franga2000 2y ago

Adobe Brackets had an interesting solution to the context switching problem. There was a keybind, I think CTRL+E, that would let you edit all the styles that apply to the current element in a kind of inline sub-editor. It was quite neat and I haven't seen it done in any other editor.

spankalee 2y ago

You didn't have to leave the local context if you use very local stylesheets. Scoped CSS like shadow DOM, plus CSS text right with your component, helps a lot with this.

wruza 2y ago
Style attribute lacks a selector (“color:red” vs. “.comp {color:red}”), forbidding the most useful use case. Shadow dom is an inspection nightmare used only by a few progressive web purists. Style.css is an untyped incoherent spaghetti. There’s no really good place for an element style in current implementation.
- krsdcbl 2y ago
  op is not talking about style atts, but referring to nesting inline `<style> @scope { ... }</style>` to declare vanilla css in the scope & context of specific DOM nodes
  - wruza 2y ago
    Isn’t it a “limited availability” feature? Why would they use it?
  - paulddraper 2y ago
    Yeah, but `@scope` is only if you don't want to support Firefox.
  - spankalee 2y ago
    No, in taking about the native scoping you get with shadow DOM, which is awesome and not an "inspection nightmare".

krsdcbl 2y ago

if the styles only concern the context you work on, this could easily be done with vanilla scoped inline styles If those declarations are relevant to multiple components within your codebase, then you'll still need to leave the context when your styles are inlined and therefore declared in multiple places

aidos 2y ago
No. That’s the point of tailwind. You can include things like hover states. Inline css hits a roadblock there and you’re forced to go out to a style tag. Then you have to start naming things. Then you risk conflicts. That’s the problem tailwind solves.