29 ms·
Why Tailwind CSS Won
- youngtaff 3y agoWon what? There are far better ways of writing CSS than Tailwind… take a look at Stephanie Eckles, Andy Bell and others work on how little CSS you actually need for great designs
- ayhanfuat 3y agoDid it? What was its competitor?
- deleted 3y ago[deleted]
- earthboundkid 3y agoSass.
- solidr53 3y agoDid not. https://npmtrends.com/sass-vs-tailwindcss https://npmtrends.com/sass-vs-tailwindcss
- whyever 3y agoFrom the beginning of the article: > It replaces a generation of sites built with Twitter Bootstrap.
- ayhanfuat 3y agoI don't think that's true. Bootstrap was mainly replaced by framework ui libraries.
- code_runner 3y agoI don’t think it replaced bootstrap either, but I think it’s sort of the Jquery problem. Jquery was handling element selection, manipulation, behaviors, futures/promises, ajax calls etc. Somebody came along in each of those categories and “specialized” such that jquery was left as the bloated old choice. Bootstrap was awesome, but as component based libraries like react/vue etc came around, I don’t need component level css helpers as much. And then tailwind helped fill in the gap of being quite a bit more explicit and granular.
- villgax 3y agoRight
- anonyfox 3y agoI am a not-good-at-ui dev, meaning I _can_ build UIs pixel perfect if given some exact design files, but it is incredible hard for me to come up with things on my own. So whenever I build something that is not already defined fully by designers (like: most of the time), I have to use some UI component catalog like bootstrap and start assembling my UI based on the options there, at most I switch a theme file to something more fancy. I basically was squarely the target group of bootstrap, and used it for lots of projects in all versions. I didn't actually care much about their technical progess (float, flex, css-grid, whatever), I just copypaste from the available widgets and add in my data. Just LAST WEEK I learned that my favorite web framework (https://phoenixframework.org/ https://phoenixframework.org/) now ships with Tailwind preconfigured by default. I also heard good things about it from trusted colleagues. So, for the next big project I decided to jump in. Still I kind of have concerns: I need "typical components" like cards/tables/grid/... to be only a copypaste away; and I need to allow some designers be able to tweak the overall look and feel, roughly like a theming file where fonts/colors/... are defined at a single place. I hope it will be smooth after all these years of bootstrap and the "muscle memory" of how to compose pages with it.
- yurishimo 3y agoAt the beginning, it's going to feel like a drop in velocity. If you only copy and paste raw code and do not make components, then it will feel like a lot of work to change the accent color from blue to yellow (unless you're really good with regex). If you want a more Bootstrap like experience, look into something like DaisyUI. It gives you a high level primitive similar to Bootstrap, but built on the philosophy of Tailwind in regards to ultimate customization using utilities. If/when you get more comfortable with the tailwind primitives, you can easily make your own component abstractions that work for your needs.
- mrieck 3y agoI made a Chrome extension called SnipCSS that is made for not-good-at-ui devs. Instead of using a framework, I just rip other sections of website designs I like using my tool. The paid version even scopes the snippet and gets all responsive styles. Theming abilities are on the roadmap and with AI being able to adjust my snippets eventually - I really don’t see the need for extremely verbose frameworks like Tailwind. But I could be wrong, I’m probably biased after having worked on it for a couple years.
- tmikaeld 3y agoIt won in composability, readability and simplicity, it's resulting code and power usage is larger.
- turbo_fart 3y agoWrong, it ships the lowest amount of CSS it can
- ponyous 3y agoThis is only 1 perspective (which is correct in most cases but not always). It can also produce massive HTML (not CSS) making it worse than pure CSS solution.
- tmikaeld 3y agoEven when used as expected, per-page, you end up with unnecessary html and css, because tailwind can't combine the classes used from other pages. For one to be able to use tailwind as efficiently as site-covering custom made CSS, you'd need to collect the HTML or CSS Classes for the whole site and compile the CSS from that, but tailwind is waaay too slow for that to even work - not to mention, node.js can't even handle that amount of classes in memory (4GB Default). I'm very well aware of this because I tried to make it as efficient as possible.
- rjknight 3y agoDevelopers get more expensive every year, and compute gets cheaper every year. This is a good trade-off to make!
- sublinear 3y agoWon what? For anyone who has been in web dev for long enough I can assure you there's nothing cleaner and more maintainable than avoiding CSS frameworks.
- janaagaard 3y ago> there's nothing cleaner and more maintainable than avoiding CSS frameworks My experience is that this is only true your CSS is written by a one man army.
- jsalama 3y agoFor me it won because I view tailwind as vanilla CSS with a nicer syntax (mostly) and sane defaults that makes your website look decent out of the box. With the prettier autosorting plugin, the classes are ordered in a predictable fashion, making it easier to read than one would imagine. It's not a perfect replacement for vanilla CSS and I still fall back down to writing plain old CSS for stuff like box shadows or more interesting grid layouts, and using tailwind modifiers like different screen sizes is less than ideal with having to prefix every single CSS property with the same modifier.
- assimpleaspossi 3y agoYour last paragraph should be all the reason you should use "plain old CSS".
- albert_e 3y agoTangential, thinking aloud: The "default" (no css) look of HTML pages with black on white Serif text with default paddings / margins / spacing...must also have been picked at the time to make web pages look pretty (in a generic sense) out of the box? Just that we have now evolved in our sense of visual design tastes / whats possible has changed over the decades, maybe.
- earthboundkid 3y agoThe default looks like a Physics paper from the 80s because it was made to render Physics papers from the 80s.
- NayamAmarshe 3y agoTailwind won because it didn't replace CSS, it added simplicity to it. CSS + Tailwind will be my go-to stack for all my new projects.
- dist-epoch 3y agoI'm using Bootstrap in a Tailwind kind of way, with many utility classes. I don't use it's container system. How do you get a basic Tailwind design running? It seems like you need a Bootstrap equivalent on it anyway.
- earthboundkid 3y agoThere is a persistent misconception that Tailwind competes with Bootstrap, but they just exist at different levels. Bootstrap provides components, but Tailwind is just a faster way to write CSS.
- conradfr 3y agoComponents are just one part of Bootstrap nowadays, it also has helpers/utilities, the (css) grid system and flex, themes (light/dark) support w/ css vars. Probably not granular enough for Tailwind fans though.
- fbnlsr 3y agoI 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.
- bennyp101 3y agoFor getting designs up and running quickly, it really is great. Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. With lots of UI being components now, it doesn't really matter that it is verbose - I actually find that helpful. And even if you want to have a class that you use all over the place, just use @apply and create a custom class that you can use anywhere. One place it can be hard to use, is if you have a specific design system - then yea at that point you either work with Tailwind and modify the config to match, or you just go with standard CSS - but at that point it probably makes sense.
- xigoi 3y ago> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" I rarely think this. It's usually “I want a button that looks like all other buttons on my site”. Vanilla CSS is great for that.
- chipgap98 3y agoTailwind is also great for this. You create components with Tailwind that make this trivial
- Sander_Marechal 3y agoThen you're just back at regular CSS with extra steps
- fjfuvucucuc 3y ago"trivial"? So I still have to componentize my presentation layers to do tailwind "correctly", but instead of writing CSS in readable multiline chunks in a language every developer already knows, I need to use this cryptic one liner in any order that literally nobody can read? What in the hell is wrong with this industry? Sometimes clever ideas aren't all that clever. Sometimes they're just dumb.
- 3y ago
- rpastuszak 3y agoI think Tailwind is more accessible to many[*] less experienced or CSS-oriented developers. Big generalisation, I know, please don't yell at me, but many of us can get 99% of Tailwind's value with UI libraries supporting: 1) style encapsulation, 2) colocated presentation/content/behaviour and 3) a more minimalist mindset/habits when building UIs (e.g. relying on simpler styling hierarchies, native DOM elements, semantic HTML instead of div soup). [*] not all, it doesn't mean that it doesn't make "senior" (whatever that means) devs more productive or that if you're using Tailwind you'll lose your 10x dev of the month badge. But, CSS is a misunderstood yet very flexible language which means it can be used or abused in a huge variety of ways.
- pookah 3y ago[dead]
- fjfuvucucuc 3y agoWhat's up with the colocation argument? Colocation of markup and business logic makes a lot of sense. Colocation of presentation? Why do you even need that? Presentation is abstracted into CSS by design. Having presentation decoupled allows you to abstract around visual elements on a page at their instead of having to sufficiently wrap everything in divs classes just to the right level to make the CSs classes work.
- dgb23 3y agoThe decoupling of CSS and HTML is a lie. HTML describes layout, not just content. Your overall structure is going to be vastly different whether you use flex or grid. And if you don’t want to write overly clever CSS you’re wrapping your dt/dd pairs in divs or you put dummy elements into your sections to control where the anchor links scroll to etc. And don’t get me started on non-hierarchical layout relationships. HTML is not flexible enough and CSS is not expressive enough for this theoretical separation to hold in practice. You would need a translation layer between pure content and layout for this to be true (like XSLT).
- 3y ago
- falsandtru 3y agoIsn't it a sign of childishness to prefer the expression "win or lose"?
- 000ooo000 3y agoIt's definitely a sign of low quality blog posts.
- ultranano1 3y agoYea Tailwind is so good. Yes you have to enter more class names into your html, but the payoff is you don't need to mess about with CSS at all unless you need something very specific. It also makes it so much easer to progressively update things to a new design, without worrying about 1 change in a CSS file potentially having an effect anywhere.
- 000ooo000 3y ago>It also makes it so much easer to progressively update things to a new design, without worrying about 1 change in a CSS file potentially having an effect anywhere. Don't you just have to worry about making sure your update is propagated to all the right class lists? Seems like trading one medium problem for 30 small ones.
- ultranano1 3y agoWell for example if you have a style on anchors on a site. If you update the general style (even it its in a class) you have to worry about everywhere that thing is used and whether it will break it. They are all completely coupled. I mean there are techniques to avoid that like BEM and co, but they rely on you and your colleagues following them, and in my experience are a huge ballache. Its also sometimes hard to track styling issues down, looking through all of the properties etc. And if you get into SCSS and mixins it slowly gets out of control. On the flip site with Tailwind, it's all there in front if you and easy to change. If you need to repeat something often, you can just create components / partials with reusable parts.
- MrPatan 3y agoOnce again, the "write once lots of small websites" people and the "maintain huge web apps" people, will be talking past each other. We share a base layer in HTML, CSS, JS, but the incentives, requirements, job environments, team sizes, couldn't be more different. I wonder about other languages and ecosystems. What would be a similar situation for e.g. C? Is there such a thing?
- contctlink 3y agoTailwind also won because of TailwindUI. With the 2 combined you can save a ton of time and still having a decent responsive design
- codersfocus 3y agoThe hardest part about programming is naming things. If you use tailwind you don’t have to name things. That’s why it won.
- xigoi 3y agoDo you also use De Bruijn indices when programming so you don't have to name variables?
- emmacharp 3y agoYou really don't have to do that. It is a pseudo-problem. Specificity and flexibility can also be managed easily in CSS only. Without naming everything. Linting can be used to enforce real good practices. Without any overhead costs.
- villgax 3y agoLol, who ever said it won? Paid HTML components? Get over yourself. Heck people can even come together for a web framework let alone one tiny paid CSS tooling.
- shmde 3y agoThe whole "Why _____ won" is the same as specific politically affiliated news channel trying to sway future voters by stating some inflated Exit Poll numbers in favor of the party they are trying to portray as winning the election. Same reason why you see every new graduate you see has been affected by the whole MongoDB/NoSQL, React propaganda.
- Kiro 3y agoThis is a good list. I would also add: * It removes the burden of having to come up with class names, and the mental overhead of deciding whether to create a new class or rely on the C in CSS. When writing plain vanilla CSS there's always a sense of friction and a need for careful planning (often resulting in me procrastinating it). That whole process is eliminated with Tailwind and I can just start styling the element immediately. * The fact that you can see immediately how an element is styled. No hidden, detached or indirect styling whatsoever.
- stefanlindbohm 3y agoSurprised to see your comment as the only one mentioning these points. Not having to make up class names (and groups of class names – ”-container”, ”-inner”, anyone?) that are anyway only used once is the greatest liberation I’ve had in my 20+ years of web development. For styles that are reused a lot I just create small & composable components (which are also defined by the Tailwind classes so they match distances & colors). But there are typically just a handful of these in a project.
- sod 3y agoIf css had a strong opinion and better syntax for responsiveness by screen width, css frameworks were way less popular. Tailwind, bootstrap and co. aren't used to avoid writing css. It's used because writing `class="my-4 mb-sm-5 mb-lg-6"` is so much faster and easier then doing this with a bunch of media queries and a class name, that has to be unique, because css is a global scope nightmare. I mean, just look at it. You have to write all this crap in css just to achieve `class="my-4 mb-sm-5 mb-lg-6"`: :root { --breakpoint-sm: 500px; --breakpoint-lg: 800px; } .foo { padding: 1rem 0; } @media (min-width: var(--breakpoint-sm)) { .foo { padding-bottom: 1.5rem; } } @media (min-width: var(--breakpoint-lg)) { .foo { padding-bottom: 2rem; } }
- xigoi 3y ago> class="my-4 mb-sm-5 mb-lg-6" I've seen Perl code that was more readable than this.
- conradfr 3y agoIf you know the convention it's quite easy. I don't know Tailwind but with Bootstrap it would be m = margin, y = y axis, b = bottom, sm/lg = screen size, 4/5/6 = size
- xigoi 3y ago4/5/6 what? Bananas? And what exactly is “screen size”? Does it refer to physical size, or number of pixels? Does it count width, height, or both?
- conradfr 3y agoThese refer to customizable variables and breakpoints that everyone using the library and having done css would know and you can probably click on your IDE to get to their definition. Personally I think that's way better than putting padding & margin in your own css classes. It actually cuts down a lot on the custom css you need to write and also helps having a uniform design.
- nness 3y agoIn the start-up space, Tailwind is to product UI as Bootstrap was (or still is) to marketing-focused landing pages. It almost serves as a litmus test as to whether you work in a start-up like environment or an enterprise environment. If you are in a design or product function in a enterprise company in non-tech industry, you steer clear from Tailwind. But, I appreciate its usefulness for developer's who just don't want to learn CSS or have the time to prioritise building their own design system — that comes with maturity. In any case, Tailwind trades one CSS problem for another and it just illustrates that web development is not different than any other kind of development — it's all about managing compromises in technology and approach, based on your needs and future plans.
- 9dev 3y agoCould you explain why you’d steer clear from it in enterprise environments?
- nness 3y agoPurely from experience — largely, design system or development projects at large organisations are lead from a PMO, design or product teams — with technology often seen as down-stream (at least, in terms of development, there is of course technology architecture/advisory along the way.) That means that the design/product requirements come first. The moment Tailwind's limitations meet design requirements, it'll take a back-seat. It's basically the same reaction you'd encounter from saying "we'll build it in Bootstrap." If a company is investing in a new product or service, no one wants to be the guy that says "sorry our framework won't let us do that design" — at least, not in first year or two of a product life-cycle. Tailwind's advantage — speed and accessibility for a range of developer backgrounds — isn't the same priority for large organisations vs. startups.
- ilaksh 3y agoTailwind usually makes more sense with React or some other component system. If you are not using components, Bootstrap might still be a reasonable choice.
- dt3ft 3y agoDid it really win though?
- 000ooo000 3y agoSilly premise and vapid article. Tailwind 'won' in the same way Bootstrap 'won', i.e. it was popular for a time. $10 says Tailwind will be the Bootstrap of 2027.
- rjknight 3y agoBut this is how all victories work, whether it's a war or a sports competition or market share. You get to be the undisputed champion for a while, until eventually someone else comes along and beats you, or circumstances change so that your victory doesn't matter so much any more. "But Tailwind was only the dominant CSS framework for most of a decade" is not much of a criticism.
- whazor 3y agoThat is the point. Tailwind is just CSS. And like the article says, you can copy paste designs from examples. The key difference between Bootstrap and Tailwind is that Tailwind designs are distributed. So Bootstrap designs feel like Bootstrap designs, while for Tailwind you can keep having new and fresh designs from different sources.
- sebstefan 3y agoWell also bootstrap "died" in the most honorable way possible, it got antiquated by the CSS standard implementing flex and grids (the original specification was based on XUL though and not bootstrap - https://medium.com/@BennyOgidan/history-of-css-grid-and-css-flexbox-658ae6cfe6d2 https://medium.com/@BennyOgidan/history-of-css-grid-and-css-...) Kind of the same with jquery (although it took quite a lot of new stuff...) I feel like Tailwind won't get that
- dmix 3y agoYeah the Bootstrap story is hardly one of the frontend world changing tastes, it was the standard forever and everything else at the time was copying it. Some key fundamentals of how CSS is written in the 2020s changed quite a bit as did how people wrote HTML (as the author alludes to using smaller component UIs with build systems replaced big HTML files and big CSS files). It was good time for a rethink IMO. Components UI systems are not going away, even as we move back to static heavy sites and minimizing JS where ever possible.
- AltruisticGapHN 3y agoEven putting aside the architectural considerations, one way that standard CSS has failed, is that the naming of properties is inconsistent and increasingly difficult to remember and work with. I find that using tailwind's flex "aliases" (which is almost what they are) is more intuitive than using the god awful standard CSS property names. CSS standards should not just look at adding stuff, but making new versions, like newer APIs where they take a good look and rename all the properties to make them more consistent.
- parasti 3y agoHard disagree. As a web developer who has to work with the CSS monster daily, having to memorize property names between CSS versions would be a particular kind of nightmare.
- surume 3y agoAccording to NPM download stats, it has 6 million weekly downloads, the exact same amount as Styled Components. Emotion also has around 6 million. So that's 12 million for CSS-in-JS, as opposed to 6 million for Tailwind, so how did it win?
- tiborsaas 3y agoIt won in the author's bubble.
- jjdeveloper 3y agoIt’s still growing, those two others have flatlined or shrinking
- conradfr 3y agoAnd Bootstrap has 5.3 millions, although on a flat line.
- solidr53 3y agohttps://npmtrends.com/@emotion/css-vs-less-vs-sass-vs-styled-components-vs-tailwindcss https://npmtrends.com/@emotion/css-vs-less-vs-sass-vs-styled... And this is ignoring PostCSS which has over 60M downloads weekly. But I guess you can use postcss with tailwind. Like... It has won nothing, its in the game though.
- zogrodea 3y agoThose who appreciate local styling as opposed to global would likely enjoy the Locality of Behavior article by the author of HTMX. Link: https://htmx.org/essays/locality-of-behaviour/ https://htmx.org/essays/locality-of-behaviour/ Discussion on HN: https://news.ycombinator.com/item?id=31454886 https://news.ycombinator.com/item?id=31454886 I personally find it easier to have information spelled out locally at the "call site".
- red_admiral 3y agoI don't think the last word has been spoken yet. It's true that, as the OP claims, many developers are not writing HTML/CSS, they are writing JSX (or similar) so maintaining a separate CSS file is a context switch. Point taken, and well made. Also, the original HTML/CSS split made more sense when one was writing documents, not applications, and the author and designer/typesetter were separate people. However, svelte (my current favourite framework) gives you the option of putting a CSS block in a component source file, which is compiled to be local to the component. For example if you put "h1 { color: red }" in a <Warning> component, then effectively what you get is some kind of "h1.warning" rule. It just works in the background how you expect it to, doesn't interfere with anything else, and you don't have the context-switching overhead of separate files. I know that svelte has a lower market share than some, and of course you can use tailwind together with svelte, but the claim that "writing CSS = switching files" is only true within the scope of e.g. React, not in general.
- zabil 3y agoI like using Tailwind. There's good reference online to help style pages. I usually find what I need, copy it, and it works most of the time. Since I don't know much about UI, Tailwind helps me get the job done.
- progx 3y agoWordpress, React, many others win too and nobody would say, that these are superior to anything else. Like in WordPress or React you can fiddle with Tailwind too. People like to fiddle. You can make things easy, or fiddle, what did people do? Correct, fiddle. Why you think so many huge overbloated frameworks have soo much success. Fiddle. Fiddle is the key to everything in development. You fiddle hours and hours until it works, you feel like the greatest dev on the planet. You fiddle it, you write a blog post over your fiddle and how fun it was, other read it and fiddle too. It work and they feel great too. Fiddle continues.
- Shrezzing 3y agoI find Tailwind's claim that you can "build modern websites without ever leaving your HTML" to not be entirely correct. Instead of context switching from my `.html` to a `.scss` file, I just end up context switching to their documentation website to find the syntax they used. It's internally inconsistent, so you can't guess what the Tailwind class name is for styling, while you can do this for CSS on the majority of properties. In Tailwind, font weights are just `font-bold` for `font-weight:bold`, while font variants drop the `font-` prefix part, and become `ordinal` instead of `font-variant-numeric:ordinal`. That's not an isolated example, it does the same with text-color versus text-decoration, and text-decoration-color adheres to neither of those systems. It's quite close to learning an entire new styling language on top of CSS. It may be the case that putting everything into the HTML is more efficient from a productivity point of view, but I don't think Tailwind's specific implementation achieves that.
- Prosammer 3y agoa lot of this minutiae will be handled by gpt moving forward, and keeping it all in the same file will be helpful for context
- sibit 3y agoIt's the minor inconsistencies that prevented me from using Tailwind on any serious projects. I've never been able to get past their choice to use text-{color} instead of font-{color}.
- nkohari 3y agoThat isn't an inconsistency, it's an intentional choice. The color of the text is an aspect of the text, not of the font. The corresponding property in CSS is color, not font-color.
- sibit 3y ago> The corresponding property in CSS is color, not font-color. So why not color-{color}-{shade}?
- alex_suzuki 3y agoI always felt slightly dirty after writing a bit of inline CSS (`style=”color: red“`) instead of a proper class, yet at the same time it accomplishes the goal and it was fast. So this is basically Tailwind, right?
- yurishimo 3y agoBasically, but with two important extras: media queries and child selectors. It’s impossible to write a media query or target a child with inline styles. With tailwind, the first one is encouraged and the second is at least possible, and in some scenarios, encouraged (group hover).
- harshitaneja 3y agoChild selectors I can understand. But won't media queries mostly be limited to containers and thus used sparsely and those cases would warrant having a class of their own even if one decides that named classes for each element is a hassle?
- Clueed 3y agoAnother aspect is css class reuse. Inline styles are not preprocessed so each inline style is a 1:1 increase in bundle size. In large applications this can be significant. Imagine having hundreds of popups each with 50 lines of css. It adds up.
- ajanuary 3y agoOne of the selling points that Tailwind pushes that I haven't seen other people mention here is that inline styles are _too_ flexible. You can do `style="color: red"`, but you can also do `style="color: #FE0005"` or `style="color: #FE1111"`. While tailwind lets you write your styles in the same _location_ as the style attribute, it allows you to restrict what _values_ you can use. You can set up a colour palette so that when you say `class="red"`, it's the shade of red that you (or your designer) picked, and your colleague can't decide to pick a slightly different shade for their component.
- 3y ago
- iamsanteri 3y agoIt won because of React.
- fzeindl 3y agoThere's a good article by the author of tachyons.css which is similar to tailwind, but never got that much attention: https://mrmrs.cc/writing/scalable-css/ https://mrmrs.cc/writing/scalable-css/
- domh 3y agoAs a primarily backend person, I like it that our frontend uses tailwind due to the copy-and-pastable aspect. I can nab an element from another part of the site and adapt, or take an element from https://tailwindui.com/ https://tailwindui.com/ and know that it will paste in and look exactly as intended. It doesn't look good, or particularly inline with the style of the rest of the site but is good enough as placeholder UI before frontend/design can come in and tidy it up. I do constantly shudder though when reading a list of class names like this: > fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 https://tailwindui.com/components/marketing/sections/heroes https://tailwindui.com/components/marketing/sections/heroes
- larrymyers 3y agoWhat causes me to constantly shudder is when I have to use project wide search to find the class name on an element so I can see what was caused the computed styles in the browser to occur. 1. Find source file with class name. See the scss extension, dread rises a bit. 2. See scss file has multiple @import directives and uses multiple custom functions. 3. Open up 4 more scss files to see what those imports and functions do. See that those files also use @import directives. Find some Malort, take a shot. 4. Repeat step 3 until arriving at root of style hierarchy or pass out. That's why Tailwind works. It may result in a very long line of small classnames to represent all the styles across many breakpoints, but at least you don't have to deal with somebody else's own little hellish adventure into perfectly reusable scss.
- emmacharp 3y agoBut these are self-inflicted wounds. Having standards and validation for CSS is easy. No need for all of this. No need for SASS either. Install Stylelint and there you are.
- larrymyers 3y agoI've encountered this situation in multiple projects where style lint was enabled, with only the defaults, and passed the linter without issue. Tailwind is seeing steadily increasingly popularity (and the accompanying backlash) because it is straight forward and does not require something like stylelint to keep you from hurting yourself.
- nathias 3y agoit won because of the disrespect of frontend in the industry, because people seem to think it's ok if backend engineers write garbage frontend code
- hailpixel 3y agoI love tailwind, and I've been writing CSS professionally since CSS2.1. I have often debated with many developer friends why it has performed so well, and this article really missed some big reasons: 1. It's works extremely well with the current component-focused UI frameworks (react, svelte, etc). Subsequently, the verboseness that is often a complaint isn't an issue at all, but a feature. 2. Does everything out of the box, and very easy to customize. 3. And, most importantly, it allows for easy art direction. Does one button need to be a slightly different size or color for this one specific element? Chuck an extra modular class on it. No need to build a complex cascasding or edge cases. (Shout out to `tailwind-merge`) Point 3 for me speeds up production work immensely. Also, not being in JS has shrunk bundle sizes by a small amount, which is always welcome in this era.
- dmix 3y agoHis first point is the same as your first point?
- progx 3y ago1. For component usage and in this case only restricted. You can only style the top layer of a component, not each part. But for component development, tailwind made it complex, e.g. if you want to make it possible to set / add custom styles to each sub-element. 2. Vanilla CSS too. 3. For designers with individual styling of components Tailwind is great, but not for app where elements have the same style or developed at component level.
- Glide 3y agoYou can use normal CSS and use @apply if that was necessary.
- Glide 3y agoI agree with all of your points. I am kind of shocked that I had to scroll so far down to see point #3 on this thread at all. CSS doesn't give the best toolset in order to do styling and organize styling. The locality of HTML structure and styling makes things far easier to work with. I would also throw in that front end coding feels far more fickle and arbitrary. Tailwind allows me to define a set of rules and then apply them directly. It ends up being more maintainable when used in conjunction with component abstractions.
- keyle 3y agoGray beard's 5c: Tailwind is a farce and a catastrophe. It's as modern as the style parameter is, and it's as reusable as a moving a dirt pile from one corner to the next. You're not learning anything valuable by learning Tailwind. Learn CSS, that will stick with you for the next 20 years. It amuses me when a library is implemented 'with tailwind', which means it's totally useless to the people _not using tailwind_, and excruciating to clean up. Go ahead, downvote me to hell, I'll see you in 5 years.
- nisegami 3y ago>You're not learning anything valuable by learning Tailwind. Learn CSS, that will stick with you for the next 20 years. Tailwind maps onto CSS in a very straightforward way. I think you'd have to go out of your way to "learn Tailwind" without also improving your knowledge of CSS.
- mablopoule 3y agoExcept for the whole "Cascading" part. I think I understand tailwind, but like the parent poster I'm really not a fan, because while CSS can be a footgun, it can also be quite clean when you use a sane DOM structure, CSS variables, and well thought out CSS selectors.
- paleite 3y agoi think that’s what people’s argument FOR tailwind is: CSS can easily be a footgun, unless everyone on the team uses a sane DOM structure, CSS variables and well thought out CSS selectors. i’ve yet to witness a project without “!important” scattered throughout the codebase.
- broast 3y agoThat's sad to hear. Good CSS with an intuitive DOM structure is simple to achieve yet so powerful. Hate to see devs give up that power.
- indiantinker 3y agoI do layouts in barebones CSS and elements styling in Tailwind. Works for me.
- deliriumchn 3y agoNGL tailwind is really nice to build new things and is absolutely amazing to create MVPs and small projects ... but once you got to the point where you open a file and see 20+ classnames stacked in every div, which makes them unreadable, its just a mess. Love-hate relationships with this tool, but the idea is very good and this article mentions biggest selling points - its easy and very fast to use.
- hyldmo 3y agoI feel like people often forget the alternative, which is opening a component and have to read 200 lines of css (possibly spread out over several files)
- emmacharp 3y agoI never got how is "context switching" such a problem. I mean, can't you have like, two files opened side-by-side in different IDE panels? Is it really that hard to "look jump" from one another? This justifies the amount of overhead added by a library like this? If I can be blunt: I find this "argument" to be lazy as **. Sorry but "context switching" is just a fancy name for "having two files opened at the same time", which shouldn't be a problem, no? PS: And almost all the other stated advantages of this approach seem to be as low value as this one considering the implied costs.
- ofcourseyoudo 3y agoYou've never had to search through multiple stylesheets and Inspect to figure out inheritance and cascading for a CSS rule that is resisting editing? I recently had to work with another developer's codebase that had four different CSS files influencing the HTML, only to find in a fifth file an !important that was mucking everything up. If you haven't experienced costly context switching working on FE then consider yourself fortunate.
- emmacharp 3y agoWell, this is bad CSS indeed. But it does not have to be that way. A little linting with Stylelint can make sure this does not happen. As an added bonus there are less dependencies and complexity.
- nhinck 3y agoNo, the element inspector will tell you what css file the rule is coming from.
- helf 3y ago[dead]
- 3cats-in-a-coat 3y agoI work every day with web projects, and the notion "Tailwind won" in any capacity sounds like a thunder from a clear sky. If we see more articles to that effect and this is not an outlier, it means the Tailwind cult is in its "red dwarf" stage, where the community becomes smaller, but denser and more convinced than ever that the entire world is a copy of their small bubble. That's good, it means in a few years Tailwind will be considered a dead tech. Tech bubbles are so weird. It's like the tulip mania or the NFT craze. It all makes sense when you're in the bubble. While those outside are looking at it, and seeing what is clearly mass psychosis.
- scrollaway 3y ago> That's good, it means in a few years Tailwind will be considered a dead tech. And that’s good because of what, beyond your own personal preference as to your Framework Of Choice?
- 3cats-in-a-coat 3y agoIt is good because Tailwind actively fights the engineering choices behind the web platform, it doesn't understand them, it doesn't build on top of them in synergy and alignment, but it counteracts and nullifies them with religious fervor and zeal. Tailwind projects read like the wall writings of a mad man, who is convinced they've discovered the secret of the Universe. And that secret is compiling absurdly large, GIGANTIC lists of CSS rules, trying to reinvent the concept of a "syntax" within the constraints of an identifier name, then copy-pasting them inline all over your HTML code, with great redundancy and repetition, obscuring the actual DOM, and then treeshaking the gigantic class lists, so your browser doesn't immediately crash while opening a basic homepage. It's good because projects like Tailwind are built on marketing and emotion, they rely on ignorance and the web design equivalent of a "get rich quick" scheme that promises great results with no effort or skill, they seek to be viral, and when they succeed, engineering arguments about the merits of good design, or even basic logic cease to have any effect, and then these projects realign the rest of the community, so you see other projects "built on Tailwind", often not even for any reason other than it's cool to be built on Tailwind. So as the bubble grows, you start also seeing jobs requiring "10 years of Tailwind experience" more and more often, the projects you rely on are starting to switch to Tailwind, and now you have to use Tailwind, like it or not, because everything is glued to Tailwind. If the bubble keeps growing, then we also see a myriad of "like Tailwind but for JavaScript", "like Tailwind, but for SQL", "like Tailwind, but for web services" and there's no end to how far it can go, because bubbles, driven by the aligned wide-eyed stupidity of millions of delusional people can grow to wrap around the entire industry, before they pop. And when they pop, the damage and loss of value and productivity is immense. Having to redo big parts of an ecosystem, so you can scrub away all the millions icky sticky pieces of Tailwind mania off things, that is splattered on everything, and the smell is completely unbearable. So. When the bubble of BS stops growing, and starts shrinking, without massive damage: it's good. It's good. ^_O
- halotrope 3y agoI wrote CSS from scratch since version one. I know why it's called cascading, I have used many preprocessors and generally don't mind writing CSS at all. That being said, all my attempts to modularize my stylesheets looked like a incomplete and buggy version of Tailwind. I could imagine that this is the reason why it's popular. Also people seem to always be ignoring the fact that you can just use tailwind to create helper classes. Nobody forces you to repeat common styles a million times.
- emmacharp 3y agoFood for thought: https://csswizardry.com/2018/11/css-and-network-performance/ https://csswizardry.com/2018/11/css-and-network-performance/ Progressive rendering of CSS is a great boost in performance. Tailwind can't benefit from this technique I think and as such, imposes an added cost on our users. Correct me if I'm wrong!
- yurishimo 3y agoI don't think is accurate. While it might not be built in currently, the same is also true of something like SASS or even plain CSS. The article describes a strategy for loading CSS in the most performant way given a variety of interconnected factors (mainly JS). You could generate the Tailwind file, and then split it when the media queries start (they're all grouped in order of screen size) with a small bash script into separate files as a part of your build process. You could have multiple build steps that analyze your component architecture and generate separate CSS bundles for each component. This is already done w/ most JS frameworks. If your argument is one of the final CSS file size, that is not an issue. Tailwind only generates classes that you write in your markup. Most Tailwind bundles I have seen, are dramatically smaller than their CSS counterparts, and it makes sense when you think about how CSS is written. Say you have a two UI elements; an article preview image and a user avatar. Say you want them to mostly display the same, but with some tweaks to the avatar to add a fancy filter on hover. Okay easy enough. Maybe you start with some sort of base mixin and then overwrite add behavior for the avatar. Over time, you add more and more tweaks to the avatar until one day, you get a call from the head of Design Department that the articles are getting their own special CSS filter. Okay, so now you extend the article. Over time the two continue to drift until you're overwriting anything that they originally shared in the beginning. The articles have different margins than the avatars and now marketing wants to allow users to upload images to comments. Does that extend the original mixin from 3 years ago? Maybe you think, "why do I even have this base class; can I get rid of it?" After some quick testing you remove the original mixin and go home for the day. Over the weekend, you get a call saying that the avatars showing user contributions from a fundraising event are all messed up. It turns out, the base mixin added `display: block` to the images, but when you tested, you really only looked at the logged in user profile photo in the navbar. Whoops. Now take that scenario and multiply it by 100 devs on 20 different teams. We've all seen it. This is why CSS is often never deleted in large companies. Devs instead to continue writing ever increasing specific selectors or using techniques like BEM/OOCSS to stop the bleeding. It takes an insane amount of discipline to wrangle CSS on a sufficiently large project. Tailwind helps manage some of that complexity, and at least provides good guard rails for teams of developers by empowering them to know that a "small refactor" won't break an entire layout. https://frontstuff.io/in-defense-of-utility-first-css https://frontstuff.io/in-defense-of-utility-first-css https://github.com/sarahdayan/utility-first-compression-demo https://github.com/sarahdayan/utility-first-compression-demo
- welder 3y agoI like Linaria [0] because your IDE typechecks your styles and gives you autocomplete/intellisense when typing styles. With Tailwind you have to look everything up in docs because it's all strings, not importable constants. Leads to a lot of bugs from typos that aren't a thing with type checked styles. [0] https://github.com/callstack/linaria https://github.com/callstack/linaria
- dahwolf 3y agoIt's ironic that "costly context-switching" is listed as one of the primary reasons, as this normally is considered a "feature". Modern front-end development heavily embraces small components, composability, clean abstractions, reusability, higher order state, decoupling of error logic, testability, and so on. The natural consequence of this paradigm is that when your PM says "hey, can you make a small change to this online form?", you'll be context-switching between many files. The idea that you currently can do "application logic" in your HTML/JSX is a gross misrepresentation of reality.
- lysecret 3y agoInteresting the ration of upvotes to comments really gives you a good estimate of how controversial a topic is.
- damethos 3y agoI was thinking the same. You do not see it in HN very often which makes me think I should avoid Tailwind for now since it's so controversial :)
- ookblah 3y agoif your main argument is that the value tailwind is something you couldn't do with "style" or inline attributes you've missed the point entirely. only thing worse than a comment made out of ignorance is one with that additional amount of hubris attached. this point somehow seems to always float to the top of every tailwind post. not surprising to see it as the top comment.
- latte 3y agoI find it frustrating that web development moved away from encouraging developers to use a collection of consistent visual styles and basic components (like Bootstrap offered - and even Bootstrap itself is moving towards being a collection of utility classes). It's very frustrating to have to make a lot of decisions around standard component styling on each new project.
- phartenfeller 3y agoIt takes some time to get used to it (basically, memorizing most import class name schemes). But this is the first time I can open an old project I haven't seen for a year and directly start changing the styles of stuff without the fear of breaking anything or having to read into how the CSS is managed again. I also like that it lets you build anything and does not have a default look.
- punyearthling 3y agoCSS is moving so fast these days, can Tailwind keep up? I see loads of comments in here using things like `.mb-sm-3` (I presume it's `margin-bottom: 3` for small screens?) as an example for how readable the classes are, but with CSS introducing logical properties I wonder if Tailwind's syntax needs to update to accommodate those changes? Using logical properties, this same example would render to `margin-block-end: 3` and already you're moving away from the easy-to-remember shorthand Tailwind created. If Tailwind's syntax needs to update, isn't that a pain in the ass to maintain? This is just one example, but CSS is introducing loads of new stuff every few months it seems and I would hate to be limited by the constraints of a CSS library when browsers are capable of achieving so much these days. I enjoy learning CSS, not Tailwind.
- cantSpellSober 3y agoSpecific to the article: > Switching to a CSS file to change styles is a costly context switch It is?! I have an IDE with more than one pane. CSS-in-JS exists if you really don't want to switch (albeit with its own problems) > you can just copy and paste a list of classes or an HTML block into your application Well back in my day we called these "inline styles" and came with their own problems. CSS is copy-pastable as well, and easily composed with classes. > Compare this to [..] CSS build systems like Saas Tailwind requires a build step! Frankly, I haven't seen a sizeable webapp without a "build step" for incorporating even plain CSS > The best way to write the least amount of CSS is to just compose basic styles This feels like an argument against Tailwind? Utility classes are helpful but will never be enough to replace CSS entirely without long lists of classes on every element
- nilslindemann 3y agoModern CSS has become so simple, thanks to @layer, Flex box, Grid, and it looks much nicer than Tailwind. And, most important, I do not have to learn it, I know it already.
- iambateman 3y agoBtw Tailwind isn’t a religion…if you don’t want to use it, that’s fine. It has helped a lot of people - myself included - write more and better CSS but I don’t understand the vitriol here. If you want to write vanilla CSS or BEM or Sass or Less, I think that’s great.
- gaoshan 3y agoMost folks would agree with you that we can use what we like but that isn't the reason for the vitriol. I think most of the vitriol comes from the way the it is presented as "the winner" when a lot of people either actively dislike it or would never chose to use it. I dislike Tailwind and would never choose it so seeing it presented as if it climbed to the top of some pile makes me laugh out loud and based on the comments there are a fair few people that agree. That said, use what works for you and I won't try to claim my choices as "winners" in some undeclared contest.
- _jesse 3y agoI think it's because the people that like tailwind really like tailwind, and they will take any opportunity to tell you how amazing it is. The evangelism gets really old after a while.
- sourcecodeplz 3y agoRealistically speaking, with CSS, you don't even need to use one single class inside your HTML. Every element is a child of another, up till <body>. The C in CSS is just that, CASCADING. I find it ridiculous to attach so many classes to your HTML elements. I think it is obvious Tailwind gained popularity because people just didn't want to learn CSS. And I don't blame them, it took me years and I am still learning new ways to achieve things. In a way, CSS's flexibility is also its beauty: you can achieve the same thing multiple different ways. You can do A LOT if you know CSS. With tailwind you can do what others have thought of you might need. This is the antithesis of programming. Programming is supposed to help you break the limitations of tools.
- Madmallard 3y agoTailwind seems legitimately like a stupid fad built by incompetents
- haswell 3y agoIn terms of skillset, I’m mostly a backend guy (of 20 years or so). I know my way around HTML and CSS, and I have a decent eye for design, but it’s not my primary focus. I recently started a writing project, and found myself unhappy with choosing a standard blog theme, and decided to build my own. For this purpose, Tailwind has been incredible. I don’t have plans to become a front end dev, and investing significant time in improving my CSS skills is not a good use of time for what will be a fairly small project. It gives me more flexibility than frameworks like Bootstrap while still offering a lot of the productivity benefits. It lets me explore concepts and ideas that I otherwise wouldn’t have the skills to play around with. This thread reads like most $language/$framework/$os holy wars. There is an awful lot of hatred over a perceived lack of “purity”, or because of the perceived superiority of other approaches. Like most of these technology debates, the extreme binary positions really miss the value that can be found in the middle. Tailwind has been great for getting ideas out of my head to see how they look, and for staying focused on the content that I’m planning to write instead of getting stuck learning about browser edge cases. If I start focusing more of my time on building UIs, I’ll invest more deeply in CSS. I’m also fairly convinced that many of the negative comments filled with disgust at the resulting syntax have never tried it. After about 10 minutes, the conventions start to become obvious, and I can write visual elements mostly at the speed of thought. This is really quite enjoyable. I’m also not suggesting it’s the right tool for every job. But the lack of nuance in much of the discussion here is pretty disappointing for the HN community. I personally feel that the future of the (useful) web depends on more people choosing to do their own thing. Tools that lower the barrier to entry and simplify content creation will always be important.
- aarreedd 3y agoPeople on HN (and elsewhere) said bootstrap was terrible when it was the most talked about CSS framework. Now it's tailwind. The top comments will always be negative. Don't give too much weight to this when choosing what tech to use.
- RunawayGalaxy 3y agoWhere are these people learning tailwind without learning css?
- backendanon 3y agoI like Twitter Bootstrap for my own sites but I do almost nothing with the frontend at work.
- pg5 3y agoI used tailwind for several personal projects, then realized I was spending way more time than I used to styling things. I switched back to bootstrap for personal projects, where I make a few tweaks to the global theme, then write zero css and very little styling besides things like margins and alignment. It's way easier and enjoyable for me, though I admit that my apps all look pretty generic.
- tansan 3y agoOut of curiosity, do you use react or use any components in those projects? The general consensus seems to be people who are practicing atomic design with components love Tailwind, and people who don't dislike Tailwind.
- cybdestroyer 3y agoWon what exactly? This ain't Reddit my guy we're not children.
- in9 3y agoFolks, while we are at it, what is the best way to learn proper front end for a hobbyst? I'm a decent programmer and work with databases and backend technologies. I want to be able to build simple front ends for the stuff I work on. I've been meaning to dive into D3, but the tutorials for basic front end stuff assume I'm really starting from scratch. But what I'm blocked by is 1) what is a nice workflow for development 2) how can I build effective frontend 3) how to setup everything.
- boplicity 3y agoThe biggest thing to worry about, IMO, if you're just working on your own on hobby projects is long-term maintainability. This gets down to tooling, which can be horrible over the long term. Tools get updated constantly, packages get updated constantly, breaking changes get made almost constantly. Five years from now, your packages probably won't work, and it will be almost impossible to work on a project -- unless you've been maintaining it over the past five years. If your product is your business, of course you're maintaining it. But if it's just a hobby you want to work on sometimes -- then you want to be able to abandon it and then come back later without the pain of figuring out why you can't compile your SCSS, javascript, or similar things.
- shadowfoxx 3y agoI think the Front-End is split into multiple different parts that work together but I sometimes think about them separately. A) The organization of the individual parts. B) The 'look' of those parts. C) Technical stuff like Accessibility, parent-child coupling, etc. Learning A can be pretty quick for some basics, learning B is a rabbit hole that can take ages to 'learn'. The good news is most of what you need is for something 'competent' is in A To answer your points below: 1) Front load your design. The equivalent to Pseudocode for the Front-End is to wireframe. Consider all of your pieces, how they should be grouped, and why. There are some common patterns you'll run into in everyday life. If you find those patterns, draw them on a piece of paper (or your editor of choice, you could do it with mspaint if you wanna). Then you can write out your HTML/CSS. I typically work back and forth. All the HTML, then I CSS, then more html if needed, then more css. etc. 2) An effective Front-End is one which gets the user where they want to go with as little friction *as possible*. Emphasis on as-possible because, just like asap, it doesn't mean "yesterday" it means, "Please prioritize this task above other tasks". An effective FE has a clear idea of purpose and wastes no time achieving those goals. Also, see patterns above. This might not be useful yet but one pattern is to look at the shape of what you're trying to display and allow that to dictate the FE. As an example - almost all documentation sites have a left (or right, or floating) vertical navigation, it takes up maybe 10% of screen width, and then the content of that documentation fill the rest of the width with some amount of padding on the left and right. Consider flipping this pattern. Make the Nav horizontal and the documentation full width to get a feel for why most documentation looks the way it does. 2.1) Some terms to search, "Elements of Art and Principles of Design". I recommend everyone look them up - there are ~20 ideas that reference how we go about making something aesthetic.( Art - color, form, line, shape, space, texture, and value ; Design contrast, balance, emphasis, proportion, hierarchy, repetition, rhythm, pattern, white space, movement, variety, and unity ) 3) Uh this is a bit more complicated than I can do in a single comment but maybe we can share discord names if you like the cut of my jib so far.
- _pdp_ 3y agoYou can just write your own styles and then use @apply <your Tailwind classes>; inside if you have the right tools. I am not sure what is this commotion about. I think that most of the critique comes from people who have never used tailwind before hence it looks foreign and grotesque to what they already know, i.e. CSS.
- shadowfoxx 3y agoI strongly disagree with the usage of context-switch here. If you're writing HTML + CSS or writing HTML + Tailwind classes that's the same context. Maybe my experience with CSS is partly to blame - I can see a design and have both the HTML and CSS in my noodle at the same time because they are coupled. The phrase will lose all meaning if we're comfortable with, "Anytime I look at a different file" as a clean definition for context switching. So If I ctrl+click to read a function that I've imported or I'm checking out the type definitions for a parameter - that's context switching?? To me, this would be like saying writing a function in a React component and then writing the HTML for that same component is context switching. It just doesn't stand up to scrutiny. The tasks are related and in a similar headspace - even if they aren't connected 1:1.
- jgalt212 3y agoRelevant post from a Tailwind CSS endorser. No, Utility Classes Aren't the Same As Inline Styles https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles https://frontstuff.io/no-utility-classes-arent-the-same-as-i...
- Illniyar 3y agoNext up, improve usability and consistency with tailwind by making component classes via things like https://daisyui.com/ https://daisyui.com/. Then you realize you can just use the classes with css and forgo the tailwind Middleware. Then we'll be back where we started.
- game_the0ry 3y agoI see there is a lot of fair critiques about tailwind, many I agree with. But as someone who works on UIs built with react, it's nice to not have then need to leave my JSX components - html, js, and css (via tailwind) are all nicely colocated. Especially nice with the vscode extension that shows the css rules of the underlying css decleration. I agree that fundamentals trump all, but tailwind is a nice css abstraction that hits my use case well.
- miragecraft 3y agoI feel most people who hate Tailwind never had to deal with the problems it is trying to solve. It does things in a brain dead way to protect you from other people’s idea of cleverness. Also in corporate settings apps and sites don’t follow sensible rules, you think you’re gonna have a few sensible classes for a few different components? Well marketing decided that they need 50 small variations of just one component, of course it makes no sense to you, but that’s the requirement so shut up and do it. If you’re not using Tailwind you end up with 50 exceptions and your normal CSS quickly becomes unmaintainable. Tailwind is the mad solution perfectly suited for a mad world, and only people who hate it are those who don’t have to deal with madness.
- Mirrage730 3y agoI don't dislike Tailwind. I think it is a great tool if used correctly, but the majority of projects I've used it on, other devs eventually tend to overuse the @apply rule and end up just creating lots of custom classes. This literally defeats the entire purpose of Tailwind and I feel like that feature alone is what is most wrong about the library. If you're going to use their classes to write your own, you might as well write vanilla CSS. There's literally no upside to using Tailwind and it's actually a huge hindrance, as you now have to remember the rules of CSS plus all the Tailwind utility classes.
- ndunas 3y agoI believe the primary reason that sets TailwindCSS apart is its inclusion of pre-defined margins, paddings, and colors. Starting with these built-in defaults is much simpler than having to consider all these design elements from scratch.