5 ms·
Tailwind is write only, you’re not supposed to read it or maintain in. Want to change some property? Delete the entire class=“” attribute and start anew. Take t
by orangepanda 3y ago
Tailwind is write only, you’re not supposed to read it or maintain in. Want to change some property? Delete the entire class=“” attribute and start anew. Take that primary button example from the article - no one is claiming that it’s readable, especially when there are hundreds of primary buttons throughout the app, each with a slight variation.
This works great for marketing or landing pages, or other use cases where it’s not you who maintains it after deployment; the next sucker will want to rewrite it all anyway.
- moltar 3y agoHow’s that different than just writing plain CSS?
- earthnail 3y agoTailwind limits the scope of your rewrite problem to the element you want to change. No fears about side effects on other parts of the page.
- fock 3y agoso if I write into "style", I have all advantages of tailwind?
- WA 3y agoNo. There is no inline style for @media, :hover etc.
- zarathustreal 3y agoAlso inline styles are not GPU accelerated like CSS classes are, so there’s a performance difference too
- silentfrost 3y agoWouldn’t using @scope or CSS modules resolve that problem?
- deleted 3y ago[deleted]
- unculture 3y agoThis is just demonstrably not true.
- jonwinstanley 3y agoAgreed. I read and maintain tailwind every day. Rewriting it regularly would be highly unproductive.
- bamboozled 3y agoI modify it all the time so I'm not sure what you're on about. I have a feeling people hate Tailwind for making CSS accessible to the masses.
- monkey_monkey 3y agoTotally agree, it's mostly gatekeeping at this point.
- pcthrowaway 3y ago> especially when there are hundreds of primary buttons throughout the app, each with a slight variation. If you're repeating monstrous groups of styles like the one in the blog post, but with a slight variation for each, then you're tremendously far out in the weeds and almost definitely shouldn't be using tailwind Tailwind really only works for a component-based framework (like React, Svelte, Solid, etc.), where you define a component representing a button, and give it props to map to the 'minor variation' you want. That way if you need to support e.g. a new device class, you just add the relevant class names there and don't have to revisit your entire codebase. This isn't apparent at all when inspecting the source of a site using tailwind, because as far as the rendered markup is concerned, these are getting repeated (and the verbosity of the output is absolutely a fair criticism) But if you're writing it, and organizing your components in a sensible way, then the problem you mention doesn't exist.