TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Why I don't like Tailwind CSS

294 pointsby jacobedawsonabout 4 years ago

84 comments

laurenceiabout 4 years ago
I&#x27;m a &quot;full stack&quot; developer. Largely a backend dev who does frontend as required, including on side projects.<p>I switched to TailwindCSS a long time ago and I have zero regrets. Its so awesome I can switch to a project that is 2 years old, and make a quick layout UI change without having to look at old CSS files to find classes etc. I also can just find a tailwind class name and apply lots of cool stuff that I&#x27;ve normally found difficult to do via &quot;pure&quot; CSS files.<p>But I also feel that this is likely to be a thing that half prefer A, and half prefer B, and there is nothing wrong with either. In this thread is likely to be a 50&#x2F;50 split between both camps, with different &quot;ideologies&quot; on how the front end should be done.<p>As the author of this article says - give it a go. If you like it, awesome. If you dont, switch back to another tool, there&#x27;s not a definitive &quot;right&#x2F;wrong&quot; answer to any of this.
评论 #26422891 未加载
评论 #26429009 未加载
评论 #26422731 未加载
AgentMEabout 4 years ago
I never got the point of Tailwind: having an element with utility classnames on it that each add one CSS rule, like class=&quot;flex flex-wrap&quot; doesn&#x27;t seem any better than just having the equivalent inline styles on it. Sure, the Tailwind utility classes are shorter, but the abstraction doesn&#x27;t simplify anything. It&#x27;s just some set of aliases you&#x27;ll need to have memorized, and it&#x27;s just moving the one-off combining of styles from the inline style property to the class property. It seems like something built to <i>superficially</i> follow the common wisdom of avoiding overusing inline styles.<p>I want to echo the author&#x27;s recommendation of styled-jsx. I&#x27;ve been using it with React for a few years now and love it. Like Tailwind, the styling is conveniently co-located with your elements, but it&#x27;s just regular CSS properties with their full power instead of a set of aliases crammed into the class property. It also encapsulates the styles to the component&#x27;s own elements by default, which is very good at encouraging making encapsulated components. The codebase I&#x27;m working on used to have a mess of CSS files, and CSS files for various screens often messed with the internal styling of common components used within the screen which would regularly cause us surprises whenever we updated those common components without realizing how they were abused across the application. Now that we&#x27;re using styled-jsx, proper component-level encapsulation is enforced by default, and it really helps guide us toward making the components themselves be responsible for their own styling needs, which keeps things much more understandable and more local with less &quot;spooky action at a distance&quot; (external styles modifying the component&#x27;s internals).
评论 #26422887 未加载
评论 #26427820 未加载
评论 #26422910 未加载
评论 #26432267 未加载
captainmuonabout 4 years ago
I feel like an old man yelling at clouds, but I actually like CSS, with classes, specifity, and the cascade.<p>Maybe the difference is that other people build <i>apps</i> with lots of components. When I write HTML I mostly build web pages - a lot of text, some images, and maybe a menu.<p>I need to be able to tweak properties among a lot of different elements at the same time. E.g. change the font face on all elements in the main area, change the color of all links that are not special links, rotate all titles and underline them, and so on. It&#x27;s an iterative approach, as I evolve the design in HTML (I don&#x27;t have a designer team that hands me a psd I just have to copy). To do this with Tailwind, you&#x27;d have to use components, and you&#x27;d have to add another layer of abstraction to affect the right components together.<p>And I know nobody really uses CSS Zen Garden style themes - but it is great to be able to take a HTML snippet and use it in another project with minimal changes and a different CSS design.<p>CSS has shortcomings - it&#x27;s missing a way to &quot;include&quot;, it could have more complex selectors, it can get unwieldy in larger projects - but it is also does a couple of things really well.
评论 #26430207 未加载
评论 #26430085 未加载
评论 #26433827 未加载
评论 #26433362 未加载
评论 #26430087 未加载
kuonabout 4 years ago
I understand the author points, and the article is well written. But, I moved to tailwind for different projects and now I use it nearly exclusively.<p>I don&#x27;t want to argue whenever it is good or bad, but it solves my problems. When you are deep down some html component, being able to style it without having to find the css file is very pleasant. The code is also more maintainable as there is no &quot;domino effect&quot;. You change what you want to change, and you are done.<p>As for vendor lock in, tailwind is MIT licensed, I don&#x27;t see the issue here. Of course if you use X, you are going to depend on X. And if they release a breaking update, just pin the old version. I&#x27;m happy with improvement in tailwind 2, but to me the framework is complete, I don&#x27;t mind it being frozen.<p>Concerning the long lines, I agree, but you can just put newlines between class names. Class name is a cdata list, newlines are ignored: <a href="https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;html401&#x2F;types.html#type-cdata" rel="nofollow">https:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;html401&#x2F;types.html#type-cdata</a> What I do is that I group classes by function, like color on one line, margin&#x2F;padding on another...
评论 #26423042 未加载
alex504about 4 years ago
&quot;I am fortunate to have only worked with Tailwind CSS in local sandboxes, and not in any production projects or on an actual team of other devs.&quot;<p>Does anyone else get frustrated when people post blogs like this without actually using the technology in any meaningful way? I was also skeptical of Tailwind, and disliked it for the first 2 weeks or so of using it, but now I&#x27;m not so sure.<p>This reminds me of the phenomenon in outdoor gear where 75% of the reviews are people who bought a tent and set it up in their backyard and for some reason deigned it necessary to write a review.
评论 #26430662 未加载
评论 #26430618 未加载
评论 #26432372 未加载
评论 #26430409 未加载
评论 #26430399 未加载
corytheboydabout 4 years ago
I had to stop immediately at “Tailwind makes code hard to read” and you’re telling me your home rolled css solution is any easier to read and understand? I would very much argue against that, as a home grown solution comes with zero precedent about how it works, so you have to go reverse engineer it from one or more source files, whereas tailwind is tailwind is tailwind in every file in every codebase.<p>It’s okay if you don’t like something, but if you’re going to publish a hate piece like this you’re going to get criticism like this.
评论 #26430102 未加载
评论 #26430071 未加载
评论 #26431210 未加载
评论 #26429646 未加载
评论 #26431555 未加载
评论 #26430689 未加载
评论 #26430571 未加载
评论 #26429657 未加载
taphangumabout 4 years ago
<i>&quot;If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.” - Adam Wathan</i><p>The advantage of Tailwind [1] is very subtle over the short term (such as not having to constantly context switch between HTML &amp; CSS files), but dramatically impactful over the long term.<p>Both in terms of time-savings, as well as code quality and ability to work with others quickly.<p>It really is something that you must earnestly try to gain an appreciation for.<p>My initial reaction was the same as the authors when I first came across it. Actually using it on a real life project changed my mind.<p>[1] - <a href="https:&#x2F;&#x2F;planflow.dev&#x2F;blog&#x2F;the-main-advantage-of-tailwindcss" rel="nofollow">https:&#x2F;&#x2F;planflow.dev&#x2F;blog&#x2F;the-main-advantage-of-tailwindcss</a>.
评论 #26423012 未加载
DigitalSeaabout 4 years ago
I wanted to like Tailwind and, I tried to tolerate it for a few months. To me, it always felt like a less opinionated Bootstrap, but arguably a lot more to learn. The same approach of having to remember class names and syntax is no different than Bootstrap. The differentiator of course, is Tailwind has better tooling support and feels less static, but it&#x27;s still quite a convoluted beast to wrap your head around.<p>There does come a time when Tailwind starts to click, you&#x27;ve memorised some of the class names and you get a feel for it. But, I still found myself consulting the documentation to do things &quot;the right way&quot; ultimately spending hours reading documentation, when I could have written plain old CSS. The maintainability aspect in the long-run is the selling point of a solution like Tailwind. CSS without some semblance of order can wreak havoc on a codebase.<p>These days I am using plain old CSS on a component level inside of Aurelia 2. My components are Web Components utilising Shadow DOM features which scope my styles to the component, but also using Constructable Stylesheets to reuse styles throughout my app. In combination with CSS Variables and Shadow Parts, it&#x27;s an incredibly powerful workflow that takes a lot of the pain of CSS out of development, it&#x27;s closer to the metal and feels way nicer.
评论 #26428712 未加载
dawnerdabout 4 years ago
Valid points but it&#x27;s still ultimately down to personal preference and I happen to really like Tailwind. Some people get into this mindset that a project simply shouldn&#x27;t exist because they, or someone else, writes about why it&#x27;s bad.<p>Also filesize isn&#x27;t as big of an issue that the author makes it out to be.<p><a href="https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;optimizing-for-production" rel="nofollow">https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;optimizing-for-production</a>
评论 #26429083 未加载
评论 #26430417 未加载
_nhhabout 4 years ago
I do disagree with a lot of points in this. Tailwind is noisy, and sure its not a silver bullet but it removes one thing from out todo list: css architecture. We are really bad at this, esp. naming stuff. With tailwind we are just getting things done and it looks great.<p>Recommending jsx styles has at least the same amount of shortcomings as tailwind, the whole post feels like „i dont like and you shouldnt either, because what i use is obviously better.“ :shrug:
评论 #26429489 未加载
评论 #26429405 未加载
评论 #26429804 未加载
machinelaboabout 4 years ago
Taiwind CSS is how you get incoherent overall design. Each element is customized to &quot;look&quot; nice but there is no overall architecture and design system. Padding here and padding there, this bold and that bold - visually tuning the entire page to look nice, but lacks a level of design coherency that is achieved best with a classic CSS based approach. You can do it with Taiwind to &quot;remember&quot; standard padding&#x2F;spacing and Tachyons does it better than Tailwind, but I personally prefer the classic method even though its not as immediate as Tailwind classes inline with HTML.<p>People are allured by the rapid prototyping aspects of Tailwind which is the main bait. It&#x27;s pretty fast to see results immediately without openining the css file.
评论 #26433855 未加载
评论 #26430523 未加载
Shacklzabout 4 years ago
When I started in a project that made use of tailwind, I initially exactly felt the points the author is making here: The HTML is a mess, dev-tools don&#x27;t play as nice, why would anyone like this?<p>Unlike the author though, I have grown to love it - not having to look at two files to understand what&#x27;s going on (html&#x2F;css) really felt like a big boon, especially for &quot;trivial&quot; UIs that just need a bit of flexbox, css-breakpoints and a margin here and there to get going. For more complex stuff, falling back on custom classes is still perfectly fine.<p>Also, the &quot;html becomes a mess&quot; argument was only an initial issue. Once you get used to the tailwind-classes, most of it becomes fairly readable - the examples of the author are, in my opinion, just as unreadable in css, especially if you&#x27;re not a design-oriented css-geek (like myself).
评论 #26422759 未加载
评论 #26422998 未加载
lmarcosabout 4 years ago
Designer who has to touch PHP code:<p>- yeah, I like having the whole project&#x27;s code in one big index.php file. No context switching, no need to go through dozens of files (controllers, models, etc.) to understand what the system is about. No semantic naming at all. My productivity is high!<p>The majority of the comments here that praise Tailwind seem to be from people who are actually not &quot; 100% frontenders&quot;, but perhaps &quot;fullstack devs&quot; or even &quot;backend devs&quot; that have to touch HTML&#x2F;CSS from time to time. It&#x27;s understandable that the practicality of Tailwind attracts people who work occasionally on the frontend.
评论 #26430468 未加载
christophilusabout 4 years ago
I hated Tailwind until I went whole hog on a project. There are so many nice little benefits to it, and those compound. Maintenance is a huge win. I haven’t accidentally broken styles once since switching to Tailwind. The VS Code tooling is great. The workflow is great. The reduced context switching is great. Using it with Preact is great, and my app’s bundle size is still smaller than just the dependencies on most React projects I’ve worked on, so I think the bloat is overblown.<p>I’m sure there are downsides, but the upsides so far seem to dramatically outweigh the downsides.
natrysabout 4 years ago
I think it&#x27;s a fairly compelling article. There is a lot of hand-waving around tailwind; I have never seen so many people collectively play the &quot;I can&#x27;t articulate why it&#x27;s good, but after using it for a while I can never go back!!&quot; card about a technology before. But I think author hit the nail on the head about the benefit of tailwind: rapid prototyping, but that&#x27;s about it. I will use tailwind for my next small project. But I can&#x27;t deny that it is indeed technical debt, albeit one that I have grown to indulge.
评论 #26422997 未加载
matthewmacleodabout 4 years ago
Like many discussions, Tailwind is a topic on which some of us are guilty of not stepping back and realising that others have different views mostly due to their background and the tools that they&#x27;ve used, and that those views are totally valid.<p>For example, I also don&#x27;t like Tailwind (or, for that matter, Tachyons or any of the similar tools). I find it absolutely infuriating to work on a site that uses it, it is a massive drag on my productivity, and offers quite literally nothing that I want.<p>But here&#x27;s the thing – I was a front-end specialist for years. I know how to write CSS and Sass, how to build UIs from them, and I have an established set of patterns and helpers for doing so. I used to be a graphic designer too, so doing things like building an application-specific design system is my bread-and-butter. For me, Tailwind is a massive distracting abstraction on top of a thing that I&#x27;m already completely comfortable using.<p>Other people aren&#x27;t necessarily in the same position. It takes a lot of time and work to start thinking in terms of the way that styling works on the web, and CSS is pretty different to many of the languages and tools that developers are used to. If you&#x27;re a back-end developer who is primarily interesting in implementing a straightforward and functional UI for something, then investing lots of time in the <i>quite different skill set</i> of front-end styling probably doesn&#x27;t offer a good return. So there are sets of tools out there which make it easy to write simple, organised, and maintainable sets of styles, without having to get right into the weeds.<p>Of course as always YYMV and you might be a CSS expert who loves the consistency of this kind of framework. But I&#x27;d definitely back up the idea I&#x27;ve seen some other people mention – there&#x27;s no obvious right or wrong, or objectively correct answer.
评论 #26428900 未加载
评论 #26423057 未加载
cagefaceabout 4 years ago
Ive been doing CSS in every flavor imaginable for twenty years now. Until Tailwind came along it was always my least favorite part of coding for the web. Tailwind eliminates all that accidental coupling that eventually turns every CSS codebase into a tar pit nobody dares to clean up.<p>Don’t knock until you’ve given it a fair chance.
high_byteabout 4 years ago
&gt;This means that you have to first learn Tailwind’s specific syntax before you can fluently string its utility classes together to achieve powerful results.<p>what kind of argument is that?
评论 #26422662 未加载
评论 #26422810 未加载
评论 #26423051 未加载
评论 #26422741 未加载
wizzzzzyabout 4 years ago
I tried the &#x27;functional CSS&#x27; approach a few years ago and whilst at first I found it pleasurable to use, I ultimately grew to hate it. The biggest pain-points for me were exposed when returning to older code -- parsing the intertertwined mix of utiltiy class names and html added a level of overhead that I didn&#x27;t have before. Additionally, later on in projects I&#x27;d encouter more edge cases where I need to provide bespoke styling for certain elements. As soon as you need to mix functional with traditional CSS I found the overhead to increase further.
评论 #26422863 未加载
stevebmarkabout 4 years ago
Utility classes are good, don&#x27;t worry about that. Utility classes are a required part of any good CSS system.<p>Programming with <i>only</i> utility classes, and patterns like OOCSS and BEM are bad, and we&#x27;ve stopped using these for literally decades.<p>The more important question is how do these libraries work under the hood, which is both little understood and rarely included in analysis. Breaking out CSS files is critical, any CSS created and inserted by Javascript is unforgivable in production. Focusing on what the libraries do in production is the key. And if your tool needs some special DSL to use native CSS features like @keyframes, don&#x27;t use that tool. Period.<p>The author is right in that CSS is 100% a solved problem, and the answer is component scoped CSS with some global utility classes (which can come from Bootstrap or wherever if you choose to use such a framework). There&#x27;s nothing better, it solves every need, and doesn&#x27;t come with any of the baggage of other systems.
cagefaceabout 4 years ago
We often talk about the rule of three in software development. The idea is that you don’t start looking for abstractions until you have at least three instances where that abstraction will be useful. The problem with component based or semantic CSS is that it forces you to define abstractions for everything up front even if n=1.<p>The beauty of Tailwind is that you can still define abstractions when they are needed and pay the price of using abstractions but you can also handle the many one offs every site has in a much cleaner and more direct way.
frobabout 4 years ago
Tailwind brings with it the same issues that css-in-js does: the inability to just reload css curing the development cycle. When working with css (or a language that complies to css), any changes to the style are pushed to the browser without a page refresh. With tailwind and css-in-js, changes to style require changes to js&#x2F;html and therefore require an entire page reload which both slows down my feedback loop and breaks any state I had established in my test app.
评论 #26428819 未加载
评论 #26428729 未加载
评论 #26428625 未加载
评论 #26433877 未加载
评论 #26429253 未加载
ampdepolymeraseabout 4 years ago
&gt; <i>But I can’t imagine that it’s possible to create a tool that does the reverse: converting Tailwind to semantic HTML and CSS. The only thing you could realistically convert Tailwind to is some other utility framework (e.g., Bootstrap) that locks you in with its own syntax and class names.</i><p>I don&#x27;t understand what is impossible about this. A standard tree walker and a GUI tool to define the individual components will suffice. Or to make things simpler, have a command line tool that takes in the CSS selector&#x2F;XPath of the desired tag&#x2F;component and generate the relevant CSS. There are already browser extensions that can do this. Also, nothing is stopping you from writing semantic HTML. Vanilla Tailwind is an (almost) one-to-one bijective mapping to CSS. It does not define your HTML unless you are using prebuilt components.
评论 #26429362 未加载
评论 #26429120 未加载
brundolfabout 4 years ago
Semantic vs utility classes is a religious war that will outlive us all, so I&#x27;ll try to stick to my personal experience and not get too far into the weeds.<p>With that said: this resonates strongly with my experience using utility classes (Bootstrap, not Tailwind, but I think it&#x27;s close enough for these purposes). On the giant front-end codebase that I used to manage - which didn&#x27;t use any CSS libraries or utility classes - here are some things I learned:<p>- It&#x27;s okay to have semantic classes and also bundle commonly repeated styles under reusable classes. Most of our classes were component-specific, but we had maybe four or five cases where a particular set of multiple(!) CSS properties were repeated in all sorts of different semantic contexts, so we encapsulated those as &quot;utility&quot; classes. However, when it was just one property getting used frequently...<p>- We learned that inline styles aren&#x27;t the devil. It&#x27;s perfectly fine to do `style=&quot;display:flex; margin-left:1em;&quot;`. The only disadvantage this has compared to utility classes is brevity. And in exchange, it&#x27;s much more readable and carries zero bloat or lock-in. The verbosity also encourages you to move styles to a more meaningful place once the amount reaches a certain threshold.<p>- For consistency in styling&#x2F;spacing&#x2F;branding: just use CSS variables. Preprocessor variables work fine, as do native custom-properties. `margin-left: var(--m-4);` works just as well as `class=&quot;ml-4&quot;`, with the added benefit that it can be used equally well inline or in a stylesheet (and, again, no bloat or lock-in). Another interesting benefit is that that value can be reused and assigned to other properties; for example, maybe in one spot you want to `padding-left: var(--m-4);`.<p>- Unpopular opinion: your HTML and CSS aren&#x27;t really separate concerns in most cases. Sometimes you can find repetition that can be factored out, and if so that&#x27;s great, but the CSS that controls your layout is and always will be intimately tied to the DOM structure it&#x27;s targeting. Given this, in my experience, you&#x27;re much better off having hyper-specific class names (most of the time!) and, if you find it helpful, some sort of componentization&#x2F;scoping system to make sure they stay hyper-specific and don&#x27;t leak (I didn&#x27;t find that we needed the latter, though only because we followed very strong conventions).<p>That&#x27;s just my two cents. In my decade of writing CSS I&#x27;ve come out against utility classes as a formal methodology, though I&#x27;m also very comfortable hand-writing CSS and I&#x27;ve mostly worked at small companies, so those factors and others may bias my opinion.
colourgardenabout 4 years ago
One thing I rarely see mentioned in discussions about Tailwind is inheritance - one of CSS&#x27;s biggest strengths but also biggest weaknesses. With Tailwind, you never even have to think about inheritance ever again! No class can ever be accidentally overridden by another added elsewhere. This is a huge win for stability when working in bigger teams.<p>Sure, scoped CSS also handles this but most developers are not building JavaScript SPAs. They&#x27;re building monolith applications or WordPress&#x2F;Magento&#x2F;Craft&#x2F;whatever themes where a handful of stylesheets are included via a &lt;link&gt; tag.
leodrieschabout 4 years ago
I don&#x27;t feel like it does vendor lock-in. It only really locks you into using utility CSS, but you can &quot;eject&quot; at any time by throwing out the framework and keeping your compiled file with utility classes.
评论 #26422756 未加载
mattwadabout 4 years ago
I completely agree with the maker&#x27;s point that class names are the bane of CSS design. However, styled components have been amazing in this regard. I&#x27;ve tried a lot of solutions over the past 8 years and this is my favorite by far. No extra crap, but you still get reusability and the syntax is like plain CSS. I tried JSS but I can&#x27;t get over defining styles as JS objects, not to mention made Typescript slow to a crawl.<p>React example:<p>``` import styled from &#x27;styled-components&#x27;;<p>const Button = styled.button` padding: 4px; font-weight: bold; `;<p>const PrimaryButton = styled(button)` background: ${primaryColor}; color: white; `;<p>```
评论 #26429415 未加载
tekkkabout 4 years ago
Well I agree on the premise to some extent, but I don&#x27;t feel like all the examples and points are as high impact as others. For example, I don&#x27;t think that styled-jsx is really the solution to the problem - writing the stylesheets inside JSX? Sounds.. strange.<p>From what I can see, Tailwind doesn&#x27;t offer a solution to the div-soup HTML at times becomes. When I look at five or more nested divs I kinda forget what I&#x27;m even looking at. Having semantic names is crucial in maintaining a layer of abstraction that helps to map the HTML inside your brain as entities with specific purposes. I myself use JSX and name my elements as Container, ButtonGroup or TooltipWrapper for example.<p>The other problem I see are the conditional class names - how does Tailwind deal with them? Do you write if-else class names? Doesn&#x27;t seem very clean. I myself use styled components where I add properties, such as visible={isVisible}, and resolve them inside the stylesheet where the value matters.<p>The benefits of Tailwind, however, seem also evident to me as abstracting away CSS into much smaller number of utility CSS classes does appear to be a very quick way to make decent layouts. It&#x27;s just that having done plenty of CSS&#x2F;SCSS I don&#x27;t find it too time-consuming to write the CSS myself. And also because of the previous points.
uxamandaabout 4 years ago
I ended up creating my own utility classes for projects instead of adopting Tailwinds.<p>My issue with Tailwinds from a design standpoint is that it allows for too many combinations, which is the issue with plain CSS. Having less choices makes things more consistent and IMO easier to read.<p>For example, a font style in our project includes the family, weight, line-height, alignment, and size in one class. This is called something like `Font16RR`. Responsive sizing is handled in the class itself (so, it may be 20pt on large screens, even though it is called &quot;16&quot;).<p>We also have utilities for a small set of spacers, margins, colors, and layouts.<p>These are defined in parallel with the UI designer, so we both call them the same thing and we agree it&#x27;s a &quot;big deal&quot; to add a new one. This has reduced the number of styles in a large legacy app dramatically, making everything look much more consistent.<p>This has the added benefit of being very easy to provide different themes which was a requirement of the project. I admit that this system requires other front end developers to either 1) Internalize the design system or 2) Receive specific mockups and copy them verbatim.<p>Would love to hear the perspective of anyone who has worked on whitelabel software and had to manage multiple themes and&#x2F;or worked with very strict design systems with Tailwinds.
nickjjabout 4 years ago
#3 can be solved with PurgeCSS.<p>OP wrote:<p>&gt; Because every new class name that you introduce could have potentially hundreds of property-value combinations, and that translates to more compiled CSS—which, of course, means a larger network request, and potentially slower performance.<p>After PurgeCSS you can end up with a 15kb CSS bundled payload even before gzip for a decently sized site. That&#x27;s so much smaller than most other CSS libraries because Tailwind is very purge friendly.
评论 #26422690 未加载
评论 #26422808 未加载
评论 #26429101 未加载
Aardwolfabout 4 years ago
How about just giving CSS a tag to vertically and&#x2F;or horizontally center multiline text in a box, without needing constructions involving multiple elements. Preferably with a simple name like &quot;center&quot; or &quot;middle&quot;, though unfortunately those two names are already taken up by things that do not actually put the thing in the center or middle.<p>Original HTML could do it in table cells. What&#x27;s taking CSS so long.
评论 #26422843 未加载
评论 #26422987 未加载
technicolorwhatabout 4 years ago
A great an opinion, which I once held. But when I looked deeply I only saw benefits.<p>I see tailwind as a damn cheat (a good thing), a hyper productivity tool throwing away all the what we learned as &#x27;correct&#x27;, and just get things done with escape hatches to fallback.<p>- Rapid prototyping with tailwiwnd<p>- Making component frameworks like bootstap? Just use tailwind sass with helpers. You can use a sass approach with including the helpers so you dont polute your DOM.<p>- it is easy to remember and guess which increases velocity. p-1&#x2F;2 etc.. m-1 p-2 etc etc. Conventions make sense!<p>- Bloat can be solved with purge<p>- Refactoring easy easy if you abstract it away in sass so you can make global style changes.<p>- Protyping is easy, and you can then move it towards a component framework once you&#x27;ve done wiggling around and changing your stuff.<p>- I find css in components hard and painful personally also makes doing broad style refactors a bit more difficult.<p>- I also use css for email and other simple landing pages that dont require html components or react&#x2F;webcomponents or whatever.<p>I find this a great addition to my life. Its a darn sharp knife, up to you what you do with it.
评论 #26428558 未加载
DrBazzaabout 4 years ago
On the other hand, I quite like Tailwind because if I&#x27;m looking for a CSS option, it&#x27;s more discoverable than raw CSS, &quot;text-&quot;, &quot;bg-&quot; and so on. It&#x27;s consistent.<p>As for &#x27;it makes your code harder to read&#x27;, I simply write the classes in HTML, then when done, move them to my CSS file via @apply, and my HTML looks the same as it has always done.
shadowfaxRodeoabout 4 years ago
The author didn&#x27;t touch one of the biggest issues of Tailwind. It ignores the Cascade part of CSS.<p>Even after optimizing Tailwind. You still end up with way more css than you should have. Add all the classes in the HTML and you&#x27;re sending users a massive amount of data.<p>Instead of writing:<p><pre><code> main &gt; * + * { margin-top:1rem } </code></pre> you write `mt-100` a thousand times.
评论 #26519821 未加载
评论 #26431978 未加载
评论 #26433528 未加载
midrusabout 4 years ago
And so, his recommendation is to use styled-jsx which is pretty much abandoned (despite of what they say) [1] and not even themselves are using it [2]<p>I do think css-in-js solutions are good, but also they&#x27;re a lot more work, and probably better suited for large teams with a shared design system, etc, etc.<p>Personally, I think Tailwind is great. But I understand some people don&#x27;t like it and cannot appreciate it because it might not look good seeing many classes and &quot;but this is just inline styles&quot;. Ok, not for you. It is still great for some other people.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;vercel&#x2F;styled-jsx&#x2F;issues&#x2F;688" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;vercel&#x2F;styled-jsx&#x2F;issues&#x2F;688</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;vercel&#x2F;virtual-event-starter-kit&#x2F;tree&#x2F;main&#x2F;styles" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;vercel&#x2F;virtual-event-starter-kit&#x2F;tree&#x2F;mai...</a>
jawngeeabout 4 years ago
I used to think like this for a long time, but after using Tailwind on real projects - there is a definite moment when it clicks and you wonder why you&#x27;ve been doing it any other way.
config_ymlabout 4 years ago
It&#x27;s funny how the author talks about vendor lock-in (which is kind of a non-issue with tailwind, since you can eject anytime) and then suggests styled-jsx as the better solution.
评论 #26422929 未加载
yowlingcatabout 4 years ago
The problem with this invective is none of the points really stand alone if the first point happens to based on an incomplete understanding. Unfortunately, that seems to be the case here.<p>Using Tailwind purely at the HTML level is not the only way to use it, and in fact, this is only supposed to be used at the prototyping stage. it&#x27;s a pretty standard part of the Tailwind workflow to extract class combinations into helpers that can be reused. If utilization doesn&#x27;t even get to this depth of use of the tool, can one really consider the usage the tool to be anything more than an abuse?<p>Frankly, Tailwind was a gamechanger for the way I do vanilla CSS. It makes it really fast for me to prototype, straightforward for me to refactor, and I end up with CSS and HTML that is straightforward and easy to maintain. It is what I always wanted Bootstrap to be, which is the Rails of CSS. Now, there are certainly valid critiques to be made of Tailwind, just as there are valid critiques to be made of Rails. But in my opinion, many of those critiques are red herrings that boil down to abuses of a very useful tool. I always have to ask myself in these situations if the problem is the tool itself (if used properly) or an abuse of the tool.<p>True, before I learned how to use Tailwind and grokked &#x2F;why&#x2F; people used it, I was suspicious and leaned towards the former. But that&#x27;s exactly why I wanted to force myself to use it and figure out what everyone else was excited about, even if I didn&#x27;t feel the same.<p>Of course, once I learned it a little bit, I felt the same way I did about Rails, which is that it&#x27;s an extremely useful tool for a lot of jobs. It did not get popular by accident, or because &quot;everyone is an idiot&quot; -- it got popular because it solved a very real problem significantly better than its competition.<p>I would hope the author eventually opens their mind a little bit to try and figure out why that is the case. They just might experience the same a-ha moment that I did.
rafaelvascoabout 4 years ago
In my earlier projects I always found myself doing exactly what Tailwind does, manually. As Tailwind does it much more throughly, I&#x27;m now 200% productive. I can adjust everything by just stacking classes. For me it&#x27;s perfect but I can see why some people dislike it.
ArchOversightabout 4 years ago
The authors proposed replacement requires me to be involved with Javascript deeply.<p>I use Tailwind to style templates that are used for static pages. I don&#x27;t have JSX components, I don&#x27;t have javascript at all other than for Tailwind&#x27;s building...<p>Tailwind is great. I have quickly been able to create a template that reflows based upon the size of the browser, in a manner I haven&#x27;t been able to do so before, and all in the same place where I am already defining the HTML. If I were to do it with media queries and have to redefine `.thing` in two different places if I made a change to one I would now have to hunt it across the file to make the change in the other four locations for all of the breakpoints I want, that becomes tiresome quickly.
fhuntabout 4 years ago
Me neither, try Tachyons which is what Tailwind wants to be, minimalistic, atomic, great UX.
评论 #26429161 未加载
jack_rimintonabout 4 years ago
I only agree with their first point; it makes the html a mess<p>But I think this could be solved with an editor extension that shortens or hides the &#x27;class&#x27; unless you mouseover it
评论 #26424937 未加载
AltruisticGapHNabout 4 years ago
Use bem like convention for your css so that all your custom classes are &quot;flattened&quot;. See eg. SuitCss naming conventions. Lint with postcss-bem-linter so classes follow PascalCase component names typical in React or Vue. Also lint for a optinal namespace (prefix eg. ais- used in Algolia Search).<p>Then import tailwind <i>after</i> yours, that way any simple flattened class can be overridden by tailwind utils.<p>So now you can have component say .ns-MessageBox feature a default text color, or font size or anything, (optinally using @apply in the scss stylesheet) and you can override any good defaults, as well as handle layout &amp; spacing in the template eg.<p>&lt;div class=&quot;ns-MessageBox text-red mb-4&quot;&gt;…&lt;&#x2F;div&gt;<p>Likewise then you can also set a good default stylesheet for plain html headings, lists, etc. Because selector &quot;h2&quot; can be overridden by utility. So your headings lists etc can also have sensible default bottom margins padding and whatnot. You have to look at the design templates to determine good defaults, then you dont need to be so verbose with tw in templates.<p>Then you can also keep your entire color system in Sass if you prefer, take advantage of Sass functions.<p>It’s very flexible.<p>A good ruleof thumb is to use tailwind in templates for all the space around components, main layout and spacing of all individual components. Those are the things that tend to bring really confusing and complicated css selectors with pseudo selectors to target first&#x2F;last elements, which is hard to maintain, hard to read for other devs, much better handled in templates.
choiwayabout 4 years ago
The problem that I have with Tailwind is that it&#x27;s not that different than using inlined styles but adds a lot of bloat without a path to clean abstractions.
评论 #26429280 未加载
评论 #26429603 未加载
评论 #26429617 未加载
jfleckabout 4 years ago
The only thing I really didn&#x27;t like about tailwind was the danger of changing tailwind.config and the long className lists. I &quot;solved&quot; both of those issues with a simple macro and PostCSS plugin: <a href="https:&#x2F;&#x2F;github.com&#x2F;fleck&#x2F;class-types.macro#why-use-this-library" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;fleck&#x2F;class-types.macro#why-use-this-libr...</a>
mplewisabout 4 years ago
I tried to use Tailwind to style a project, built in Rails, with server-rendered HTML templating. I found that it was too much work to keep it all straight in vanilla HTML. But I could see Tailwind being a great fit if I started a project using, say, Vue components. In that world, Vue helps remove some of the repetition by hiding it in higher-order components.
mouzoguabout 4 years ago
I find it good for quick prototyping or personal demo projects but I wouldn&#x27;t use recommend it for a large project with many contributors.<p>The trade-off between having messy html for faster development or css-in-js is not worth it for me. I still don&#x27;t like mixing html (jsx) with javascript. I&#x27;m an old-school seperation of code vs concerns.
评论 #26422642 未加载
评论 #26422858 未加载
keithnzabout 4 years ago
like many others here, I was a bit dubious with tailwind at first, but I&#x27;ve been using it for a year now with vue. I think for me, because I&#x27;d often do my CSS in a similar manner where I&#x27;d build up utilities, this seemed like a nice standardized and reusable way of what I was doing anyways. It&#x27;s super fast to do things when you learn it, the optimized css output is tiny, it is really configurable, I find it pretty easy to read and understand what is going on. I understand what is going on with other peoples tailwind projects really easily also.<p>What is weird, is the author, without irony, uses his vendor lockin to react to argue for better ways to do css? ok.... 1, his examples are super simplisitc and 2 that would actually look really simple in tailwind rather than string injected variables. Which if you have to keep using everywhere is going to make your css super bloated.
sepehr500about 4 years ago
I have used Tailwind on multiple large production sites over the years and seen pretty hard core CSS devs learn it. Every time they start off with skepticism. One week in they love it. To address your points,<p>1. Tailwind Makes Your Code Difficult to Read<p>Not sure why the styled-jsx examples at the end are easier to read. Tailwind is semantically obscure like any language you don&#x27;t know is semantically obscure. Also with the intellisese VSCode gives you, learning is super easy.<p>2. Tailwind Is Vendor Lock-in<p>Vendor lock-in is a really strong word for what is going on here. Would you say React is vendor lock in because switching to another lib is hard? I worked at a company where we switched all of our CSS modules to Tailwind, and it actually cleaned up the code quite a lot.<p>3. Tailwind Is Bloated<p>It&#x27;s actually the opposite. Large companies use atomic css approaches because it keeps your CSS bundle small. Especially with purgecss, you can get bundle sizes super small. I even saw a company switch from CSS modules to Tailwind to reduce they CSS size for AMP.<p>4. Tailwind Is an Unnecessary Abstraction<p>@apply is the equivalent of composing functions together in any other programming language. Also @apply lets you keep using the scales and color palette you set in tailwind.<p>5. Semantics Is Important. Tailwind Forgoes It.<p>Naming things is hard. It&#x27;s a problem in regular programming, and CSS is no different. Needing to name less things makes life easier, especially when you component system name is already descriptive.<p>6. Tailwind and Dev Tools Don’t Play Nicely<p>Usually I just click .cls in dev tools and check or uncheck styles as needed. Or if I start typing a style dev tools intellisense helps me.<p>7. Tailwind Is Still Missing Some Key Features<p>pseudo elements are being discussed. As for it not being possible because of bloat, see above (PurgeCSS)
AltruisticGapHNabout 4 years ago
The author doesn’t understand value of utilities and composition, regardless of the css framework. Unsurprisingly then, recommends awful css in js approach.<p>Granted the value of composition is most appreciated when you do the frontend of component based apps.<p>You can use sass, big picture architecture of the styles across app, and also benefit from a shared language with the rest of the team and write less css for mundane things that composition solves very easily (eg. a heading with less margin than default, a messagebox with different font and whatnot, dont create hundreds of classes or modifiers when a few utilities can do this).<p>Sadly most devs dont understand css precedence enough to figure out how to easily combine custom css and tailwind approach. (use bem style convention, keep specificity as low as possible, ideally 1 )
nrafabout 4 years ago
Does Angular natively solve at least part of the problems that Tailwind &#x2F; CSS-in-JS with the way it scopes it&#x27;s CSS?<p>With Angular, it&#x27;s generally quite simple to figure out where the CSS for a component lives (it&#x27;s literally right there in its own file alongside the component).<p>Sharing common values (e.g. colors, borders, paddings, etc) across classes was the biggest issue we faced, so I can see Tailwind being useful there.<p>In our project, we&#x27;ve somewhat solved it through a mix of sensible base styles and classes (&#x27;btn&#x27;), custom classes (e.g. `clr-primary--500`), CSS variables (e.g. `--clr-primary-500`) and SASS mixins &#x2F; functions. It also makes it really to switch out themes dynamically, switching b&#x2F;w dark and light modes for example, just requires switching up the CSS variables.
pier25about 4 years ago
I agree with most of the points in the article except the mention of using CSS in components. IMO CSS in components only really works in some situations when the component is very small and there isn&#x27;t much CSS.<p>I love Svelte, it&#x27;s my main framework these days, but after many years in React&#x2F;Vue&#x2F;etc of trying in-component styles, I&#x27;ve gone back to good old SCSS files.<p>It&#x27;s a bit tedious to manage <i>Component.svelte</i> and <i>Component.scss</i> but there&#x27;s such an elegance to writing pure SCSS. Not only your component files become much simpler, just markup and logic, but you can use SCSS as it was intended. With vars, mixins, third party utilities like Bourbon, etc. The separation of concerns feels awesome. Like going back to the ZenGarden of yore.
whatarethembitsabout 4 years ago
As someone who&#x27;s been familiar with tailwindcss for a while, it&#x27;s undeniably huge benefits first hand AND also having worked with other popular CSS frameworks on production codebases this thread is a reminder yet again of cautious you have to be of comments on any public forumn. So much confidence and denial based on trivial details that would&#x27;ve been cleared up with barely a week of usage. Why comment at all (especially with so much confidence) when you clearly don&#x27;t have experience of something? How many other topics have I been influenced on that I don&#x27;t know much about, by unfounded confident opinions based on absolutely nothing?
indymikeabout 4 years ago
This article convinced me to give Tailwind a try.
评论 #26423013 未加载
brainlessabout 4 years ago
I have been using Tailwind CSS for about a year now, both on my own product and 2 products from 2 different founders I work with from On Deck.<p>Here is what I have to share:<p>1. Tailwind Makes Your Code Difficult to Read<p>Tailwind CSS, in my opinion, is the easiest to read and understand what is actually happening. Yes I agree there is a learning curve to the shorthand notations but the naming is not bad at all as the author says. A couple days of light use and the system was in my head. Saying this as a full-stack engineer who deals with React + Python and devops. So I do not ONLY look at CSS shorthand notations all day.<p>The example with the really long string of Tailwind CSS classes do not occur with me since such a complex string of classes is probably going into a component that needs customization from React component parameters. So I build the Tailwind CSS class names line by line with if-blocks or similar.<p>2. Tailwind Is Vendor Lock-in<p>&quot;Once you build an app with Tailwind, moving it to any other CSS framework or library in the future is going to be grueling.&quot; - the whole point of Tailwind CSS is not to move to a framework. Your JS components mixed with the CSS are exactly your own branded framework. I am not sure I understand the move argument.<p>Even though all the products I work with are small, we have new frontend engineers helping out and it took them less that an hour to find the right Tailwind CSS class and making pixel-perfect components. This is close to CSS yet comfortable to see and existing project and contribute.<p>3. Tailwind Is Bloated<p>Purged Tailwind CSS based stylesheets are ridiculously small. Try it out for yourself. (1)<p>4. Tailwind Is an Unnecessary Abstraction<p>Again, like I mentioned, I was even nervous that new people will not like the abstraction that Tailwind CSS has. But once you see an existing, well setup project, its so easy to check documentation and contribute. The abstraction is super thin on top of CSS.<p>&quot;If it’s not already obvious, @apply completely violates Tailwind’s founding and guiding principles.&quot; - no it does not. Tailwind CSS exists to create your own style framework. It is that simple. Once you see patterns, you use @apply to codify them and reuse. That is so convenient. It is a feature in my opinion and a really important one as your project grows.<p>I want to stop here, but I feel that these 4 points are not strong counter points to someone using Tailwind CSS for a year over a few projects now.<p>(1) <a href="https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;optimizing-for-production" rel="nofollow">https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;optimizing-for-production</a>
DHPersonalabout 4 years ago
Tailwind seems best-suited for the HTML panel on a CMS being controlled by a team that only knows the most basic of HTML and CSS, rather than by the dedicated development team. Having a front-end developer code the CSS for the project seems like a better idea than to scatter the design around the site’s HTML. The shortcut of Tailwind on huge projects feels like part of the mindset that now gives us websites with huge download sizes that frustrate mobile users because the team didn’t get the time to code efficiently.
ookblahabout 4 years ago
tailwind ramp up is kind of jarring at first, but any verbosity is 100% made up in the prototyping and maintenance phase. i can&#x27;t tell how much easier it is to just dev my components structure + style and have it reflected instantly vs trying to think of some clever div class then go to the stylesheet and work there. months later when you are re-visiting your widget you have to get back up to speed on exactly how things are structured. with tailwind i can instantly see it and adjust.
评论 #26432646 未加载
XCSmeabout 4 years ago
Personally I&#x27;m not a fan of tailwind BUT I always end-up creating my own utility classes (eg. .font-bold, .flex, .flex-center) and use them in combination with normal classes, just like modifiers.<p>So I do something like &lt;div class=&quot;button text-center&quot;&gt;.<p>I am not sure if I could actually include Tailwind and just use their utility classes for my needs, in combination with the normal CSS usage, or that would make things confusing.
knlamabout 4 years ago
Look, I don&#x27;t like Tailwind as much as author but I think author make several weak points about tailwind weakness (apart from the hard to read part). Here is the better argument about why you should not use tailwind:<p><a href="https:&#x2F;&#x2F;sancho.dev&#x2F;blog&#x2F;tailwind-and-design-systems&#x2F;" rel="nofollow">https:&#x2F;&#x2F;sancho.dev&#x2F;blog&#x2F;tailwind-and-design-systems&#x2F;</a>
seanwilsonabout 4 years ago
Nice article, just some of my opinion on the points raised:<p>&gt; In my personal experience, poor naming conventions (or just poor variable names in general) are the source of a lot of confusion when other people read your code. I would rather look at some CSS that has padding: 0.25rem or margin: 0.5rem instead of trying to mentally map Tailwind’s p-1 or m-2 to their CSS equivalents.<p>Short names for commonly used concepts helps readability (quick to read, takes up less space) and makes it less tiring to type + change. It super tiresome to write long winded CSS (media queries are especially bad for this) and then find out you went in the wrong direction and have to rewrite it.<p>&gt; Look, I don’t like Tailwind for lots of reasons. But none of them are nearly as concerning to me as vendor lock-in. It’s why I don’t want to invest time in migrating existing projects to Tailwind, and why I’d be reluctant to use it for any new projects.<p>Is this a real concern? I&#x27;ve migrated sites from custom CSS -&gt; Bootstrap, Bootstrap -&gt; Foundation, Bootstrap -&gt; custom CSS etc. and it&#x27;s always painful not matter what. At least with utility classes, you don&#x27;t get problems where you&#x27;re scared to delete CSS because you&#x27;re never really sure where it&#x27;s being shared. You generally just want to rip out all the previous stuff too as combining two frameworks isn&#x27;t practical.<p>&gt; For starters, if you’re not sure what to call that &lt;div&gt; in your markup, consider whether it’s actually needed. One of the great things about the Semantic CSS paradigm is that it forces you to structure your markup logically and meaningfully.<p>I think what makes utility classes nice for custom designs is there really aren&#x27;t good semantic names for a lot of things that are only there for presentation reasons. Like I need to put a &lt;div&gt; around the heading + intro text so I can add some padding between those and the screenshot under it...so call it `.intro-wrapper`? Now there&#x27;s a CSS quirk that requires me to wrap that all in the &lt;div&gt; so call it `.intro-container`? I want to make the three lines of the header animate in one by one so call them `.header-line1`, `.header-line2`, `.header-line3`?<p>It&#x27;s tiresome coming up with name for stuff like this you only use once and even more so when you&#x27;re experimenting and might not even need them. It&#x27;s just noise that requires you to keep jumping between your CSS and HTML definitions to get anything done. Use semantic HTML tags like &lt;header&gt; &lt;h1&gt; etc. and custom class names for things you&#x27;re sure you&#x27;re going to reuse though.<p>Either way, utility classes is yet another &quot;it depends&quot; choice where there&#x27;s no single answer. Use it where it makes sense.
hactuallyabout 4 years ago
So he hates &quot;vendor lock-in&quot; but recommends styled components in JSX?<p>How on earth can someone end up so cognitively dissociated?
eyelidlessnessabout 4 years ago
Having just built a project with Fela, I&#x27;m curious if anyone experienced with it have a take on how it compares. I immediately rejected Tailwinds because I do actually prefer to write CSS. The end result in the HTML is about the same (garbage pile of classes, biggest difference is they&#x27;re meaningless).
nwmcsweenabout 4 years ago
My issue with tailwind is the absolutely arbitrary naming scheme, I developed something similar to tailwind but the CSS naming was created to be mnemonic and use common property values (based on top 10,000 site CSS property values and few extra). `display: flex` was `di-fl`, `display: flow` was `di-fw`, etc.
评论 #26451424 未加载
onliabout 4 years ago
Many good arguments against tailwind here. The whole approach of using a framework with opaque variable names and not chaining instead of real CSS can be criticized, and the article does it well. Though maybe I missed it, but it is actually nice to write a site with such CSS frameworks, be it tailwind or something else, so that should be noted. Reading the code and changing it, that&#x27;s a different story.<p>However: The author writes a good critique here, and then destroys all of it by favoring the eternal sin of CSS-in-JS instead. If tailwind has its flaws, CSS in JS is the worst approach thinkable, something no web developer would ever do. I&#x27;m aware that it&#x27;s used in the JS framework niche, but that&#x27;s not web development, that&#x27;s app UI development in a browser and seems to come mostly from web-foreign developers. If it&#x27;s that or HTML with tailwind, then tailwind is always better.
评论 #26422733 未加载
评论 #26422975 未加载
edemabout 4 years ago
A bit tangential, but I started using Chakra UI on one of my projects and I really like it. Performs much better than Tailwind probably because it comes with batteries included and I almost never have to touch CSS in any form.
brightballabout 4 years ago
Tailwind was a breath of fresh air for me.<p><a href="https:&#x2F;&#x2F;www.brightball.com&#x2F;articles&#x2F;thank-you-tailwindcss" rel="nofollow">https:&#x2F;&#x2F;www.brightball.com&#x2F;articles&#x2F;thank-you-tailwindcss</a>
jspashabout 4 years ago
I seem to have noticed something about these Tailwind love&#x2F;hate discussions. And it all boils down to this:<p>Old-school devs seem to like TW for the benefits it gives over other CSS paradigms (Smacss, BEM etc.) It speeds up development over those. Testing and editing in the inspector is simple and easy to put back into the source.<p>New-style devs (SPA ALL TEH THINGS!!) do NOT like TW. They are already dealing with 3 concerns in the same file. Adding another layer of abstraction is unwelcome. Changes seem to multiply and search&#x2F;replace makes seemingly simple adjustments a royal pain.<p>Then there are the Bootstrap acolytes who won&#x27;t give up their btn-default no matter what comes along.<p>All I can say is to each their own. But Bootstrap guys(and girls)...it&#x27;s time to move on. :P
mpcannabravaabout 4 years ago
I skipped to the &quot;what should you do instead&quot; and the code examples the guy gives are laughable. Would rather have that in your code or a few utility classes in your components?
balfirevicabout 4 years ago
I&#x27;m happy to see the discourse has shifted from &quot;WTF, who would ever think Tailwind is a good idea?&quot; to at least trying to give some arguments against using it :)
quark_frog_223about 4 years ago
If pure CSS is like cement - form it however you like, but you need to do it over and over again, and Bootstrap is like those colored wooden building blocks children used to play with - you get your standard shapes and that&#x27;s it, but most easy to use, than Tailwind is like Lego - you can&#x27;t form freely like with cement but have enough freedom to build creative designs based on *given* standard building blocks.<p>That&#x27;s how Tailwind won me over.<p>Sooner or later most design-devs (devs doing design as well) end up using some kind of utility classes. Using Tailwind from the start saves some serious amount of effort and provides a standard across projects and teams.
patatinoabout 4 years ago
My biggest problem is components, I just need more than a utility class framework for my side project, I do not have the time to implement all the components myself.
评论 #26429811 未加载
评论 #26429049 未加载
swyxabout 4 years ago
for balance - i wrote Why Tailwind CSS a while ago: <a href="https:&#x2F;&#x2F;www.swyx.io&#x2F;why-tailwind&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.swyx.io&#x2F;why-tailwind&#x2F;</a><p>Here are my responses to OP&#x27;s arguments:<p>1. Tailwind Makes Your Code Difficult to Read<p>true, there is a learning curve. But this is over relatively quickly once you learn that &quot;w&quot; stands for &quot;width&quot; and &quot;h&quot; is for &quot;height&quot;, and the screen size prefixes map as you would expect from default to medium to large.<p>as for scanning left to right... the enter key is right there. my VSCode autoformats the classes to break lines just fine. its probably the tailwind plugin doing that.<p>2. Tailwind Is Vendor Lock-in<p>first of all, &quot;vendor lock-in is bad&quot; is a poor kneejerk reaction. we all buy in to vendors at some point. eg with frontend frameworks. and as far as vendor lockin goes, Tailwind is extremely light - if you want to stop using it, freeze the generated output, and then continue writing css in whatever new way you choose. this is far LESS vendor lockin than alternatives like styled components and css modules, which force you to make specific js and build tool choices. and all of these are open source so this again is an order of magnitude less lockin than anything proprietary, which is where this argument really starts being at all useful.<p>3. Tailwind Is Bloated<p>how is declaring things on the docs indicative that &quot;its creators have tried their very best to hide this fact from you.&quot;? they&#x27;ve just decided on sensible defaults. the bloat only impacts development and builds. This contrasts to the problem that utility css solves, which is bloat inside of hard-to-maintain append-only CSS with lots of duplicates, which <i>actually affects users</i>.<p>4. Tailwind Is an Unnecessary Abstraction<p>components. use components to repeat stuff. this rant on @apply takes things way overreacts, calm down.<p>5. Semantics Is Important. Tailwind Forgoes It.<p>counterpoint: naming things is hard. Tailwind names css utilities for you so that you don&#x27;t have to come up with custom names for every component.<p>6. Tailwind and Dev Tools Don’t Play Nicely<p>au contraire, tailwind plays VERY well with devtools. <a href="https:&#x2F;&#x2F;twitter.com&#x2F;swyx&#x2F;status&#x2F;1265745431448838144?lang=bg" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;swyx&#x2F;status&#x2F;1265745431448838144?lang=bg</a> (since this video I even learned that you can type in the classname box in chrome devtools and it autocompletes nicely for you<p>7. Tailwind Is Still Missing Some Key Features<p>then write regular css :)
评论 #26430806 未加载
NiceWayToDoITabout 4 years ago
Some of those arguments are kind of reasonable, until author defeated purpose by recommending `styled-jsx`.<p>I am just trying to imagine working in a team 1 dev + 1 designer...
wrnrabout 4 years ago
I like to style my web component using the tag name like - my-component { color: red }, would such a thing work well with tailwind?
评论 #26429545 未加载
hmwhyabout 4 years ago
For me Tailwind CSS solves a cognitive problem: I find that switching between CSS and HTML files reduces my development velocity substantially (maybe I&#x27;m getting old).<p>I was always a bit wary of CSS frameworks, and I preferred writing &quot;actual&quot; CSS and used mostly CSS&#x2F;SCSS before I discovered Tailwind CSS. Interestingly, even before I discovered Tailwind CSS, I was already getting into the habit of using utility classes like &quot;flex&quot;, &quot;flex-wrap&quot;, because it made a lot more sense *to me* to see those in the HTML.<p>I personally find the examples given in the blog post contrived. Take the &quot;hard to read part&quot;, for example, this is how I normally format my HTML using Tailwind CSS:<p><pre><code> &lt;div class=&quot; w-16 h-16 md:w-32 md:h-32 lg:w-48 lg:h-48 &quot;&gt;&lt;&#x2F;div&gt; </code></pre> Even if you are using styled-jsx or any framework that gives you the ability to write &quot;regular&quot; CSS, it still wouldn&#x27;t beat the example above in terms of readability. As such, the following paragraph just doesn&#x27;t make sense:<p>&gt; I’m comfortable reading other people’s code, and making sense of their logic and relating their markup to their CSS.<p>Assuming that we are not talking about component-scoped styling here (otherwise the point made would be moot), with Tailwind CSS you can instantly relate CSS to markup <i>without</i> switching between files and hunting down all relevant class names in the example given above; this is arguably also easier when you are not working with the source and just debugging on the front end.<p>&gt; But if I have to look at ~1000 LOC changes in a PR, and most of that is coming from long strings of class names, I’m not going to be happy. It’s also going to be more difficult for me to make suggestions that could eliminate redundant CSS or simplify your markup.<p>I have never dealt with ~1000 line of changes in a single PR, but that sounds pretty broken and there is an abstraction problem that is much worse happening elsewhere and irrelevant to the argument.<p>The last line also sounds like a throwaway without any solid example to prove it: even if switching between markup and CSS files is not taken into account, I can&#x27;t imagine hunting down redundant CSS would take longer with Tailwind CSS. If the redundant classes are on the same element you can see it instantly; if they are on different elements, it would still take similar amount of work to debug and find them? Assuming that there are no redundant classes, then there isn&#x27;t much to be simplified because the whole point of Tailwind is to have (managed) complexity in the markup instead of having it in the CSS. I personally would rather have it in the markup, but that&#x27;s just me and I can&#x27;t say if it&#x27;s better or worse.<p>&gt; With Tailwind, you’re forced to interpret semantics on the fly.<p>I find it easy to just ignore class names and focus on content when I need to with the way I structure my code. Maybe a lot of people don&#x27;t realise that it&#x27;s okay to, or feel comfortable with, splitting class names and attributes onto multiple lines.<p>Just one more point on being bloated, note that on Tailwind CSS&#x27;s website they say:<p>&gt; Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10KB of CSS to the client.<p>For reference, the blog&#x27;s CSS is 12.12 KB gzipped.<p>Most of the rest of the post follows a similar pattern that&#x27;s just out to trash Tailwind CSS. As others have already pointed out, this may end up being a 50&#x2F;50 thread of personal opinions after all, but it seems that we keep getting more and more of these sensationalised hate posts that are just based on personal preferences...
poletopoleabout 4 years ago
No one will see this comment buried under 200 others, but if you made it this far checkout basscss. It&#x27;s the only css framework that ever has made sense to me. Devs keep recommending Tailwind to me and I honestly don&#x27;t understand what they see in it, I feel like I&#x27;m taking crazy pills.
sekmetabout 4 years ago
Tailwind is amazing! Zero regrets using it daily!
nfRfqX5nabout 4 years ago
this is becoming a monthly topic at this point
jefflombardjrabout 4 years ago
At the end of the day, sure if you don&#x27;t like it - don&#x27;t use it. But I don&#x27;t understand the hate for it, because I have a very different experience with it.<p>---<p>&gt; 1. Tailwind Makes Your Code Difficult to Read<p>This one is interesting to me. I think devs should take responsibility for writing easy to read code. A framework is a framework. I agree shotgunning classes all over markup is messy, but Tailwind doesn&#x27;t do that - you do.<p>I would encourage the author to understand the concepts of extracting[0] and defining components[1] within Tailwind. That can make things very easy to read by the author&#x27;s logic.<p>&gt; 2. Tailwind Is Vendor Lock-in<p>Not necessarily. Especially if components are defined, if anything it makes it easier to change. Because you have a css class abstracted at the same level of your markup. In the world of various competing component frameworks, I would argue the opposite is true. You can just as easily apply tailwind component classes to Vue as to React as to Svelte etc.<p>&gt; 3. Tailwind Is Bloated<p>As others have mentioned purge css[2]<p>&gt; 4. Tailwind Is an Unnecessary Abstraction<p>&quot;Because instead of repeating styles in your CSS, you’re now repeating them in your HTML&quot;, &quot;you’re still writing the exact same amount of CSS, disguised as class names&quot; This just isn&#x27;t true if you use it correctly again see extracting and defining components.<p>&gt; 5. Semantics Is Important. Tailwind Forgoes It.<p>Author recommends BEM and then in the end says &quot;You don’t really need BEM, either&quot;. I agree with component scoped css, BEM is less important. Tailwind<p>&gt; 6. Tailwind and Dev Tools Don’t Play Nicely<p>What? Anyone who experiences this should revisit CSS order of precedence. It behaves exactly as expected. I&#x27;ve never had a problem with chrome&#x2F;firefox dev tools.<p>&gt; 7. Tailwind Is Still Missing Some Key Features<p>So use css? Using tailwind isn&#x27;t a binary option. You can use both tailwind and css. It&#x27;s a tool, use it where it makes sense.<p>---<p>[0]: <a href="https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;extracting-components" rel="nofollow">https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;extracting-components</a><p>[1]: <a href="https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;plugins#adding-components" rel="nofollow">https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;plugins#adding-components</a><p>[2]: <a href="https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;optimizing-for-production" rel="nofollow">https:&#x2F;&#x2F;tailwindcss.com&#x2F;docs&#x2F;optimizing-for-production</a><p>[3]: <a href="https:&#x2F;&#x2F;jigsaw.w3.org&#x2F;css-validator&#x2F;validator?uri=https%3A%2F%2Fwww.aleksandrhovhannisyan.com%2Fblog%2Fwhy-i-dont-like-tailwind-css%2F%231-tailwind-makes-your-code-difficult-to-read&amp;profile=css3svg&amp;usermedium=all&amp;warning=1&amp;vextwarning=&amp;lang=en" rel="nofollow">https:&#x2F;&#x2F;jigsaw.w3.org&#x2F;css-validator&#x2F;validator?uri=https%3A%2...</a>
评论 #26430805 未加载
sandgrahamabout 4 years ago
Why is it that Tailwind causes such emotional reactions in people? Functional CSS has been around a long time now.<p>When functional css ideas were introduced it presented a novel solution for scoping issues, naming issues and bloat issues. I remember discovering basscss and tachyons around 2015. The paradigm immediately felt like a huge improvement in my workflow. The iteration was so much faster than what I was used to with Bootstrap, BEM, or SCSS- I felt like I could design in code for the first time. My favorite workflow for web design became loading basscss in a CodePen, with almost no idea of the outcome I wanted and iterating towards something. What’s kind of amazing is that it allowed for these sorts of quick sketches <i>and</i> improved maintainability in large projects.<p>It also led me to my first inkling of a design system- through the use of composable and constrained styling primitives. A lot of the ideas introduced with those libraries now saturate the frontend ecosystem. And keep in mind, functional CSS, or at least the principles behind it have evolved a lot since 2015, particularly when it comes to components and CSS-in-JS. The original creator of basscss has gone on to create a number of equally impressive projects that advance the main ideas: styled-system, rebass, basically everything from @jxnblk.<p>I haven’t used Tailwind or any other functional CSS philosophy over the past few years since I find primitive and composable styling components, CSS-in-JS, themes, and CSS variables offer even better workflows for building the applications I work on. When Tailwind initially made a splash I was already pretty into what I consider this next phase of styling libraries- so I was a bit confused why people were so excited about it when basscss and tachyons had been around for years. Looking through the docs it seemed like they had taken basscss and tachyons and layered a bit of Bootstrap on top (in the form of nicer visual defaults and some component patterns).<p>Outside of the core functional principles, I don’t like the idea of Tailwind as much as I do basscss&#x2F;tachyons. I think Tailwind tries to put too much of your styling in atomic classes. Part of what makes basscss great is the small API and the <i>constraints</i> it introduces on reusable patterns. I don’t want <i>all</i> of CSS to be represented as atomic classes- just the stuff I reuse 90% of the time. It also seems like a bit too much tooling when one of the main advantages I saw in the older libraries were that they were just plain CSS- you could use them on pretty much any project, regardless of build tools or architecture. I used to start with basscss on a project and then add my own layers of patterns on top- extending the system as needed.<p>That said it still offers a lot of the good stuff, combined with great documentation and more thought put into component patterns. It’s a great starting point, especially if you don’t want to or can’t take on runtime costs for CSS-in-JS (this is also evolving but still a concern). Its success isn’t a fluke or a result of misdirection as the author of this critique alleges. Reading through Adam Wathan’s original post on functional css (<a href="https:&#x2F;&#x2F;adamwathan.me&#x2F;css-utility-classes-and-separation-of-concerns&#x2F;)-" rel="nofollow">https:&#x2F;&#x2F;adamwathan.me&#x2F;css-utility-classes-and-separation-of-...</a> he describes the exact same trajectory in CSS thinking I went through as a frontend developer through the 2010s. It’s a great read and I think speaks to the level of consideration put into the library. If I were to try a new project today using functional CSS I’d definitely give Tailwind a shot.
orthecreedenceabout 4 years ago
I just started using Tailwind for a small project and love it! I thought I&#x27;d respond to the author&#x27;s points:<p>&gt; Tailwind Makes Your Code Difficult to Read<p>I think this is a preference, not a fact. I tend to write 2-dimensional CSS (I know the standard convention is 1D) so seeing a bunch of classes one after the other on the same line doesn&#x27;t bother me.<p>Regarding the abbreviations being difficult to parse, I don&#x27;t find it so. And, do you want short class definitions or do you want long and descriptive class names?<p>&gt; Tailwind Is Vendor Lock-in<p>I&#x27;m not convinced. <i>Every</i> framework is lock-in. Otherwise there&#x27;d be no point.<p>&gt; Tailwind Is Bloated<p>Possibly, but it seems to trim itself down when compiled to production quite nicely. Paired with minification&#x2F;gzip, doesn&#x27;t seem like such a big deal.<p>&gt; Tailwind Is an Unnecessary Abstraction<p>I like the promises it gives. &quot;Here are some predetermined boxes your design can fit into, if you need to change them, do it via the config.&quot; In other words, you&#x27;re constraining yourself. I think this is important. Even on teams with designers, the design can evolve over time and you&#x27;ll have one section of an app looking different from another. Tailwind enforces a set of good practices. Maybe I like this because I&#x27;m not a great designer at all, but it seems to me this kind of constraint could have helped many projects I&#x27;ve worked on in the past (ones that <i>had professional designers</i>).<p>Secondly, regarding &quot;What exactly is the difference between using @apply and just using the CSS rules that correspond to your utility classes?&quot; Well, because your utility classes are still subject to the constrains I mention above. The documentation specifically only recommends doing this for places where something is too small to be its own component, but too common to repeat the same class names over and over. Sure, you can misuse it, but I found the documentation obvious how the best practices here.<p>&quot;Because instead of repeating styles in your CSS, you’re now repeating them in your HTML, through class names.&quot; I think Tailwind specifically makes sense in the context of components. If you&#x27;re repeating the same classes over and over again, you&#x27;re doing something wrong.<p>&gt; Semantics Is Important. Tailwind Forgoes It.<p>I can see both sides to this. The one comment I&#x27;ll make is that in the cases where I&#x27;ve vehemently stuck to semantics, it has been wonderful to <i>build</i> but horrible to <i>change</i>. Semantics makes a tone of sense, until things start shifting around, and then you&#x27;ve got half of your classes referencing some object that&#x27;s no longer there, or a thing that used to live here, but now lives there, and only some of the styles moved and some were copied etc etc.<p>When I first saw Tailwind, I thought &quot;wow, this is just inline styles++, how stupid.&quot; Now I kind of see the magic behind it.<p>&gt; Tailwind and Dev Tools Don’t Play Nicely<p>This might be true, I haven&#x27;t really done much devtools CSS debugging with TW yet.<p>&gt; Tailwind Is Still Missing Some Key Features<p>It also defines &quot;dark&quot; but I haven&#x27;t seen anything about custom themes in general. What if I have more than just a normal mode and dark mode? I&#x27;m curious how one would build themes on top of TW.<p>&gt; With frameworks like React and, more recently, Svelte, it’s never been easier to write CSS without leaving your markup, and without resorting to inline styles. You don’t really need BEM, either.<p>This is true, and I&#x27;m excited to try and build something more complex in Svelte and see how it goes.
subsubsubabout 4 years ago
I&#x27;m too old and tired to try to be clever on the front end any more. TailwindCSS is the right answer for big projects and for small. Yes it can get bloated but i&#x27;m willing to take that trade off if it means I don&#x27;t have to do any more css.
评论 #26422941 未加载
blacktriangleabout 4 years ago
I&#x27;m not a huge Tailwind fan either, but this author is missing something major in his obsession about long lists of utility classes. The @apply directive is there to convert utilities into semantic classes, and eventually that&#x27;s where you get on a Tailwind project.<p>Where Tailwind is different is the development process. One problem with CSS is that before you can do anything, you have to come up with a class, ie some abstraction. You then start using that class all over your code until over time you realize it is the wrong abstraction.<p>What Tailwind lets you do is get going without having to create any abstractions. Then as time goes on you see the repeated patterns in your code and can use @apply to refactor those into the correct abstractions.<p>So you end up in the same place as traditional CSS, but the trip is much smoother.<p>The author&#x27;s complaints about pseduoclasses and break point are spot on though, and he only lightly touches on pseudo elements which are another huge black eye for Tailwind.
butt_huggerabout 4 years ago
It&#x27;s really sad to see novice developers rediscover and revisit arguments from decades ago, but that&#x27;s really the curse of software development, isn&#x27;t it? Why does Tailwind CSS even have some kind of brand name? It&#x27;s just bad CSS. It doesn&#x27;t need a name.
评论 #26429653 未加载