5 ms·
I don't get Tailwind. In my book, CSS is here to facilitate the style of multiple webpages by modifying a set of rules, and classes are here to mutualise said r
by fbnlsr 3y ago
I don't get Tailwind. In my book, CSS is here to facilitate the style of multiple webpages by modifying a set of rules, and classes are here to mutualise said rules.
With Tailwind, it looks like you design by writing HTML, which is the opposite of what CSS aims at. So if you wish to change your design, you'll have to update multiple templates instead of one CSS rule.
Every time I've had to work with Tailwind, it felt like a chore and it was an unpleasant experience.
- PrimeMcFly 3y agoIn a recent thread someone explained Tailwind was best used with component frameworks, and that made it make a lot more sense and I could see the appeal.
- MrPatan 3y agoStill can't see it. Once you do components CSS gets much simpler, what's the point of a layer on top?
- code_runner 3y agoIt’s actually one less layer. My layout and styling are finally together, and well documented. I don’t mean in the same file like a .vue file. I mean they are TOGETHER.
- timeon 3y agoIt is easier to write CSS with Svelte.
- code_runner 3y agoIt’s easier to poop rainbows with unicorns.
- seedboot 3y agoIt's easier to verb with nouns.
- progx 3y agoI disagree, tried it with a small custom component lib in our company. It was a huge overhead to add options for e.g. a button-component. You can use Tailwind on top level and it is easy. But as soon as you have complex components with sub-elements, the styling gets really complicated. It was easier to add component specific classes and define the css within the component. You call then the component with the classname.
- commotionfever 3y ago> if you wish to change your design, you'll have to update multiple templates instead of one CSS rule. this comes up on every tailwind post and it isn't true. tailwind encourages you to not repeat yourself by making reusable components (or fragments etc) instead of reusable classes. that way if I want to see how the button both looks and works I only have one place to look even if you don't do this, with tailwind you encode your design system (colours, spacing) etc in the config file so even copy pasting everything will get you something consistent https://tailwindcss.com/docs/utility-first#maintainability-concerns https://tailwindcss.com/docs/utility-first#maintainability-c...
- threatofrain 3y agoI don't feel this point is strong because when you look at some of the most popular Tailwind components or templates in the ecosystem, such as the one made by the Tailwind people, the Tailwind code is still pretty crazy.
- yurishimo 3y ago> the Tailwind code is still pretty crazy. The rendered output is crazy, yes. But this argument applies to every JS framework ever created. Authoring the code is best encapsulated by components. If you look at the source files available for their paid templates, they are all componentized.
- barnabee 3y agoMost JS frameworks are as bad too! Maybe the issue is that the giant pile of JS mess has created such a disaster that adding Tailwind doesn’t feel like making anything much worse. I can buy that. For what HTML is for (documents, web pages, etc.) CSS makes sense and Tailwind seems crazy. If you’re trying to code an application, for now perhaps React + Tailwind and a mountain of NPM dependencies does actually make sense. Really I think going back to application coding via something like WASM surely has to replace all that though.
- 3y ago
- Gualdrapo 3y agoIn my understanding it somehow abstracts the process of styling a website or whatever and make it easy for people who for any reason don't want to write CSS. Although I have the sensation many people find hard to write CSS and even despise it (I've read people here in HN who seem to think we should've kept doing layouts with HTML tables and don't agree layout is the job of CSS!) I definitely agree having dozens of classes in your HTML is messy and weird.
- code_runner 3y agoTailwind gives something like a fluent interface. div.height(maxVH).color(primary).hide() It’s all stuffed in classes because that’s the limitation given and this information belongs in the markup. The above is much cleaner to me than: div.class(“primary”). I need to go find primary. What is the parent class. What happens if this isn’t a div now etc. what happens if the parent isn’t a div? Tailwind just spells it out for you right alongside the layout so that you have all the information in one place. For me personally, I was able to do things in tailwind I could never do in raw css, but I bet I got better at css as a result. The docs are also incredible for tailwind. As good as mdn is, you need to already know what you’re looking for.
- blowski 3y agoI can sum up what I like about Tailwind in the following code: ``` (in CSS) a.link { border: red; } a.link:hover { border: blue; } ``` ``` (in Tailwind) <a class="border-red hover:border-blue"> ``` It's much easier in Tailwind for me to see locally what's going on with that styling. If I lived in this code all the time, or I was good at structuring CSS, then maybe the first would be more appealing. But I'm a shit at CSS, it always turns into an unmaintainable mess, and I look after a lot of different projects that I might not touch for 6 months. So Tailwind's approach is easier for me.
- xigoi 3y agoNow imagine that you want to change the border color to yellow. Would you rather change a single line of CSS, or every single link on all your pages?
- pookah 3y ago[dead]
- nannal 3y agoctrl+h Suppose we want to change just one link? Would it be better to make a new class with all the same attributes except the color and apply that to the specific link.
- xigoi 3y ago> ctrl+h Brittle. > Suppose we want to change just one link? Would it be better to make a new class with all the same attributes except the color and apply that to the specific link. Why copy the attributes? Just override the one you want to change. You can even use style="…" if you're sure that it's just one link.
- squarewhite 3y agoIn tailwind you'd probably use a named color such as `primary` or `border-primary` or something like that, so you still have the ability to change it in one place. I don't really like tailwind myself, but I don't think that's an issue
- thinkingemote 3y agoI think the framework is meant to be used by other frameworks and not by humans. It is an unpleasant chore if you use it by hand and I have given up on it but I can see that if it's just used in components and then html is not written by hand but made dynamically it could work better. It's basically a CSS framework for JS frameworks and not for writing HTML.
- Kiro 3y ago> So if you wish to change your design, you'll have to update multiple templates instead of one CSS rule. Changing the CSS to apply site-wide changes sounds great in theory but after working in front-end since IE6, this almost never happens in practice. You're never certain how the styles cascade and indirectly affect things so you're afraid of changing the core CSS. Styles isolated to components is a much more scalable approach in my opinion and then it doesn't really matter whether you use Tailwind, CSS-in-JS or scoped CSS (Vue etc).
- xigoi 3y ago> this almost never happens in practice …so let's solve that by making it completely never happen?
- winstonewert 3y agoLet's not spend extra effort supporting a theoretical feature that won't actually happen.
- xigoi 3y agoIt happens pretty often. I change the style of my websites this way all the time.
- winstonewert 3y agoOk, sure. But that's not what you were saying in the comment I responded to.
- throwaway4027 3y agoI agree with you. As a developer I like the separation of style and content. We also gain better readability when the code says "<div class="product-price">199</div>" than a long list of tailwind classes. CSS styles are also more reusable across different web sites. I can to some degree see that you can increase re-usability when using shared React components, but then you just create technical debt for those who want to test other frameworks It seems to me that Tailwind is only a semi-scalable solution for those who use React components or similar. But as mentioned above, that causes problems when you want to make other webapps in another framework
- 9dev 3y agoAs soon as you have recurring product prices, you’re encouraged to use @apply to group those classes. In practice, however, you’re using components of some sort anyway, whether in Frontend or backend code, so this isn’t really an issue.
- stefanfisk 3y agoWhere have you seen such an encouragement? Even Adam states that @apply was a mistake https://twitter.com/adamwathan/status/1559250403547652097?lang=en https://twitter.com/adamwathan/status/1559250403547652097?la....
- 9dev 3y agoIt’s a completely viable solution for certain situations, say, having a .button class. The things mentioned in that twitter thread have nothing to do with that.
- stefanfisk 3y agoI was commenting on "As soon as you have recurring product prices, you’re encouraged to use @apply to group those classes. ". It's certainly technically possible to create a CSS class. But AFAIK the recommendation is loudly and clearly to use components https://tailwindcss.com/docs/reusing-styles#extracting-components-and-partials https://tailwindcss.com/docs/reusing-styles#extracting-compo..., and for good reason.
- _lvbh 3y agoI like to use tailwind with Svelte since I rarely reuse css but rather the component as a whole. It’s rare for two components to share a class/style