31 ms·

Tailwind CSS v3.3

165 points by adrian_mrd 4y ago

krvajal 4y ago
Tailwind v20 = just css
- return_to_monke 4y ago
  an argument for it is that it couples content and styling together, instead of them being in different layers. Sometimes, they are, and should be, separate. But in other cases, styling is related to the content, or part of it.
  - megous 4y ago
    The only time I can imagine coupling content and styling together is if you have mostly non-repetitive elements in the content (rare, I think, maybe some very "designed" landing page, or whatnot), or you have other ways to repeat the elements without writing the styles out each time for each element. (And at that point you've just moved the problem of having to invent names for CSS classes to having to invent names for bunch of "components" and their properties)
    - illiarian 4y ago
      Any UI beyond trivial lists will couple style and content. You have a card? Boom, you need to couple styles for the title, for the content, for the footer etc. You have a form? Boom, you need to couple styles with the form. The idea that styles are somehow decoupled from content is funny idea that very rarely works out in practice.
      - megous 4y ago
        You missed the point. Would you copy paste around: <form class="asd fasdf e4rwe sfdg sdfgbbv cxvbxcs asdf asdf wer wer gfdghdfgh fgh"> 20x around your static website and keep it updated manually when someone "from design" wants to change the "form" look? Or would you just <form class="classic-form"> and describe the style of that class of form in a single place? I know what I'd do. :)
  - The5thElephant 4y ago
    This is achievable in a much nicer way with SFC frameworks like Vue and Svelte where you also get scoped styles and other benefits. One of the reasons Tailwind is so popular is that so few developers know anything other than React.
    - illiarian 4y ago
      Tailwind works just as well in Svelte and Vue
      - The5thElephant 4y ago
        Of course it's just class names, what I mean is that if fewer people used React and more used Svelte/Vue they would feel less need for things like Tailwind or CSS-in-JS. My argument is that React is actively bad for writing HTML/CSS, and therefore people came up with clunky solutions to get around those limitations. Certainly Tailwind is more than just a solution for React, but a large part of its popularity is due to it.
        illiarian 4y ago
        > they would feel less need for things like Tailwind or CSS-in-JS. Why do people keep mentioning Tailwind and CSS-in-JS in the same sentence? And no, Tailwind would still have its place even if Svelte appeared first because instead of writing the same styles everywhere you'd still want to extract them into a file, and have sensible defaults for them. Oh look, Tailwind does exactly that.
        The5thElephant 4y ago
        > Why do people keep mentioning Tailwind and CSS-in-JS in the same sentence? Because one of the biggest arguments for each is scoping styles to a component instead of the default global cascade. > And no, Tailwind would still have its place even if Svelte appeared first because instead of writing the same styles everywhere you'd still want to extract them into a file, and have sensible defaults for them. Writing same styles everywhere? I'm not sure I understand what you mean, that isn't related to Tailwind or frameworks. Sensible defaults are just design system tokens, those are usable in way more styling approaches than just Tailwind. I'm not saying Tailwind wouldn't exist, I'm saying it wouldn't be as wildly popular as it is now. React's lack of CSS features has encouraged a generation of frontend devs to simply not learn CSS fully. Sure you need to know some CSS to use Tailwind, but in many cases people just copy-paste Tailwind templates from elsewhere (another benefit of Tailwind) and don't actually understand the styling. I see Tailwind classes that do nothing in the wild all the time.
- megaman821 4y ago
  The spec authors should be looking at the popularity of Tailwind and be thinking of how to enhance the style attribute. Then Tailwind really could mostly be a bunch of CSS variables and inline styles.
  - nfw2 4y ago
    I've been working on a library that is basically what you're describing: https://github.com/nealfwilliams/style-kit-n https://github.com/nealfwilliams/style-kit-n Feedback welcome
  - err4nt 4y ago
    Tailwind depends on @apply in PostCSS to function, something that was never officially proposed for CSS, but has been killed by its author and we know for sure CSS won't do, for the reasons the author of the original @apply idea lists here: https://www.xanthir.com/b4o00 https://www.xanthir.com/b4o00 So we have known all along that this will never happen. It was rejected for some very good reasons before Tailwind began.
Varqu 4y ago
So tailwind at this point is basically just a bunch of custom CSS classes which are granular to the point of single CSS properties? How is that better, than just writing custom CSS classes for components + having some util CSS classes?
- lmiller1990 4y ago
  This is how it basically was since day 1. These comments always appear in Tailwind threads -- more often than not, the poster hasn't given Tailwind a good try. It's definitely worth building a few small projects - it looks and feels bad at first, but once you get used to using it, it's really hard to go back to anything else.
  - champagnepapi 4y ago
    Agreed. I was a hater at first, but now I’ll never go back. Took me a couple months to get used to it. However i split my time between both frontend and backend.
  - agos 4y ago
    I've built a few small projects with it, and as much as I love the design tokens the idea of having a CSS class for every value of every possible property feels like abusing CSS, and it makes it feel like it has the same complexity of css
    - withinboredom 4y ago
      that's how I felt until my first `dark:text-white`. I got 'dark mode' out of the box and only needed to change a few things. I didn't need to google how to set up the css, then define a whole new dark mode. I was able to do iteratively, right on the component I was changing. This made 'more work' on the dev side, but on the testing side, you just had to find a single instance of the component and verify it looked reasonable. I think the ability to mix up things like that is what makes it quite powerful. You don't have to go digging through your sources to find all instances of '.my-one-off-class-that-some-random-dev-also-used'.
iamsanteri 4y ago
I think the reason behind Tailwind’s emergence and prominence is React, mostly.
- naiv 4y ago
  I would say it is more the lower entry barrier for devs who do not want to spend time on learning css so they are not that relient anymore on a dedicated frontend person
  - whiskey14 4y ago
    +1. Learnt CSS through tailwind much faster than I did when trying to learn raw CSS
    - rimliu 4y ago
      How do you know that?
  - lewisflude 4y ago
    I'd say to be good with Tailwindcss you actually need a pretty comprehensive understanding of CSS already! Originally I'd written it off as "CSS for backend developers who hate writing frontend code" and I was a diehard CSS purist, but actually using it, it definitely has a great DX for people who love writing component UI/styling.
    - illiarian 4y ago
      I hate writing styling because I suck at design. But Tailwind works for me because: - it gives good defaults (from sizes and distances to color palettes) - it's documentation is heavenly, and helps you find the precise thing you're looking for in seconds I actually leveled up my understanding of CSS thanks to Tailwind :)
- nness 4y ago
  I agree, it feels like it was a reaction (no pun intended) for the CSS-in-JSS trend which started in React and complicated with Webpack pipelines. In my mind, Tailwind is just "Bootstrap for CSS-in-JSS." Honestly, as much as I disliked the CSS-in-JSS trend, it did solve a reasonable problem with React — one which Vue and others had solved with their SPC. It feels like ducktape on top of ducktape...
sjsanc 4y ago
Have there been any comparisons written about Tailwind's performance vs thoughtfully selected CSS? I've been writing Tailwind exclusively for the last year or so and I haven't noticed anything in particular, but I find that using utility classes causes me to lose an awareness of the cascading nature of CSS. Aside from the filesize bloat due to the bigger HTML files, do long and highly-repetitive class lists slow down style parsing or DOM interaction? And if so, would @apply directives have an advantage over class lists?
- DanielHB 4y ago
  I can't say much about selector performance besides that class selectors (.class-name) being very fast, opposed to complex selectors (like "#some-id > div a"). Of course less classes applied means less work for the browser, but the real cost is the complex selectors With regards to bloated HTML, that might seem the case but since you reuse the same class-names everywhere in your app (and tailwind JIT removes non-used classes), compression really cuts down on the size of your bundles. It just looks bloated in the web inspector. This is a disadvantage, it is a bit hard to debug HTML with all those class-name strings around, although I would say web-inspectors should just truncate "class" attr value With bundler performance it adds some overhead (tailwind has to go through all your .js/tsx files), but in my experience not noticeable
sophiabits 4y ago
I used Tailwind for the first time about a month and a half ago, reworking my blog from `styled-components` [1]. I had been avoiding it because--as other people have said--it looked really ugly and unmaintainable. I was pleasantly surprised by just how easy it was to get going, however, and my fears about it all ending up as an unmaintainable soup were unfounded. So I guess I'm a Tailwind convert :) It's very quick and easy to get stuff done using it--the design system is very well thought out. For internal dashboards I think you're still better off using an off the shelf component library like MUI, but Tailwind is a really good option for anything else imo. [1] https://sophiabits.com/blog/css-in-js-to-tailwind-better-web-vitals https://sophiabits.com/blog/css-in-js-to-tailwind-better-web...
- bobmaxup 4y ago
  > reworking my blog from `styled-components` > about a month and a half ago > unmaintainable soup were unfounded I see this a lot, but rarely with a qualification. How did it quell your fears about unmaintainability? What about tailwind makes it maintainable?
  - sbergot 4y ago
    Not op but here is my take: - styling is scoped to your components. You won't break your UI trying to refactor rules & selectors - by default you don't need to invent class names. The components provide enough context - it forces you to make a selection of colors an spacing, leading to a more coherent style. - it is easier to understand than a lot of other css frameworks. It is just a "basic" rule generator with some QoL like automatically pruning the rules you are not using in the production code.
  - sophiabits 4y ago
    Yeah, good question. At a high level I think the best analogy is React: when I first saw it, I wasn't entirely sure about mixing in HTML with my Javascript. It seemed strange. Now that I've been using React for years, however, collocating these things seems like the obviously correct thing to do. Tailwind is similar: instead of extracting styles out to a separated styled component or even a separate .scss file, you collocate them with the rest of your layout. When I read code using Tailwind it's easy for me to "see" how things will look in a similar way that I can "see" how a React component will function at run time. More concretely, I think these three things were important for me: 1. There's a really solid design system underpinning the Tailwind utility classes. With styled-components you start from nothing, and with off-the-shelf component libraries (e.g. MUI) you get a design system that isn't quite as well thought out. Tailwind's classes just work together really well out of the box because the defaults are so sensible. I'm not a designer, so this is a really big win for me. 2. Components help prevent class soup. I suspect I wouldn't enjoy Tailwind quite so much if I were writing plain HTML, but for things which _do_ need to be reusable like button styles I'm still writing code that looks like `<Button>...</Button>`. Nothing really changes here from styled-components -> Tailwind other than how the styles are written; they're equally maintainable. 3. One-off snowflake UIs are really easy to implement, because you can just write your classes right then and there. I've never worked on a nontrivial web application where _everything_ fits cleanly into the design system, and going through the ceremony of creating a styled component just to add a little bit of additional spacing is a pain. It also sucks for maintainability because a name like "Spacer" doesn't tell me anything about the styles, so I need to context switch and jump to the definition. In contrast, seeing "mx-2" instantly tells me what's happening. I do think Tailwind's something that benefits from first-hand experience, though.
lewisflude 4y ago
Really exciting release! Glad to see proper TypeScript support for the config files.
christophilus 4y ago
Tailwind threads are always the same. And like in all of them, I'm here to say I love Tailwind, and thank you to the devs! It's such a small thing, but the 950 color is a great addition. It's one of the areas where I've reached for my own classes, so I can eliminate yet another little bit of CSS from my codebase.
- barrell 4y ago
  Big ups for 950! This will get rid of a lot of unnecessarily transparent text in my codebases (black/95 etc). Now fingers crossed that at some point we see a 25. XD Edit: seconding sentiment of thanking the tailwind team <3
- Kaotique 4y ago
  I've tried them all. Vanilla CSS, SCSS, BEM, Bootstrap, Styled Components, different kinds of CSS in JS solutions and I still prefer Tailwind over the other methodologies and libraries because I don't have to think about abstractions and naming things. Abstractions are huge foot gun in frontend development because it kills all flexibility. With Styled Components or similar libraries you have to wrap all your components with all kinds of variants that inherit properties. Composition over inheritance is a huge benefit of Tailwind. The big problem with CSS is the specificity and if you ever worked on a real big project with BEM or vanilla CSS/SASS it will eventually become a huge mess of specificity and more and more specific nesting of class selectors to override other styles that you don't want. With Tailwind you can just add exactly what you want, nothing more, nothing less. Sure the html is "ugly" but that part is invisible. It is also very likely your bundle size will be smaller because it only adds the CSS for the helpers that you really used. Just my 2 cents I guess. People should use what they like.
- Lockal 4y ago
  950 color is kind of mad and arbitrary decision though. Why tailwind has color 50 and 950, but does not have 850? It is so common to have some `bg-gray-900` button on `bg-gray-800` background, and no way to slightly highlight the button (not to the level of background).
  - 4y ago
nailer 4y ago
A reminder that if you’re having trouble naming divs, you have too many divs. Everywhere I’ve worked that used tailwind just kept adding wrappers around every ui element since they didn’t know css basics.
ar9av 4y ago
finally ESM. jesus. The internals are still CJS, but at least we can use it ESM.
b212 4y ago
I think Tailwind isn’t that great if you’re really proficient with CSS. But if you need backend devs to fiddle with styles or have some teammates who aren’t senior css magicians then it really shines. Anyway I’m not entirely sold, I feel good old Sass is way better than styled components and Tailwind, but only in right hands. It’s painfully easy to write unmaintainable styled components and Sass/CSS.
- alli_star 4y ago
  [dead]
- stuckinhell 4y ago
  Mastering flexbox seems to be what most people really need to do.
  - illiarian 4y ago
    I've mastered flexbox thanks to Tailwind :)
vancroft 4y ago
I've tried Tailwind on smaller projects and it's not a bad way of writing styling. Not having to think about class naming or selectors speeds things up a bit, and it's nice that it promotes only shipping the styles you need (i.e. no classes with lots of the same properties declared). However, one thing I'm still wondering about is how easy it would be to maintain visual consistency in a large project with lots of components, and lots of different developers working on different parts of the app. Say the branding guidelines a certain style, like rounded corners with some shadowing and a hover styles, something that can't be done with a simple utility class. This should be consistent across many different components and pages. Then, someone in design updates the guidelines to have a different value for rounding and shadows. With Tailwind out of the box, each component now has to be updated separately, and developers have to remember, or at least be able to check in documentation if that exists, which components use this particular style. Is the answer then simply to use @apply for combinations of style? Doesn't this simply re-invent CSS classes, and create another layer of abstraction (you now have a class, which is composed of other classes, which themselves are composed of values set in custom properties). I'd be very interested to hear how people manage this in large teams, over time.
- random_kris 4y ago
  We defined Tailwind config overriding the default values to match our design system. Then on top of this we have components library with common basic components and layouts Then inside the apps we use the components and that Tailwind config and it works quite nice. We have rules for tokenized colors and sizes so it all references the config. There are problems and all, but all in all I think is quite good
  - chiefalchemist 4y ago
    That makes sense, but what value does TW add? Why have that dependency? And not have the team roll your own CSS?
    - moomoo11 4y ago
      Because you can ship in a few days instead of wasting weeks trying to bike shed through something as basic as css. Use tailwind as a tool, have a component library that can be put together in a couple days max, and now you have ubiquitous styling language and don’t need to waste hours on css of all things. There are bigger fish to fry.
whoisjuan 4y ago
Even before opening this thread, I knew people would be talking shit about Tailwind. I don’t get why HN seems to dislike it so much. I’m just going to say that Tailwind, IMHO, is the best thing that has happened to CSS. It’s by far the simplest and cleanest abstraction of CSS, and it accomplishes a lot through a very straightforward implementation. At this point I can’t see myself writing CSS in any other way.
zagrebian 4y ago
Isn’t it ironic that the first section talks about extended color palettes, but their website does not honor my CSS (prefers-color-scheme: light) preference when I visit that page with JavaScript disabled. There is a moon icon in the upper right, but it’s broken without JS.
debarshri 4y ago
Coming from bootstrap, I would say if you are not using tailwind, you are missing out. It is just breathe of fresh air. But, but, but, seems like almost all the project that use tailwind ends up looking like linear. Not that I blame tailwind for that, there was an era when almost all bootstrap projects looked similar, I think it is the same thing.
- rrosen326 4y ago
  I just tried to switch a simple quick site from bootstrap to tailwind and backed out. It seemed like I had to build my base template from scratch whereas with bootstrap they give it to me for free. With tailwind, is there an easy way to start with a nice simple working responsive site that I can tweak?
- Someone1234 4y ago
  Which version of Bootstrap? Since BS5+ offers very similar CSS utility classes to Tailwind, but with no preprocessor step/tooling.
jerrygoyal 4y ago
would be nice if they had naming convention for classes so devs don't have to rely upon docs to find the right classname I wrote about it in a more detail: https://gourav.io/blog/tailwind-criticism https://gourav.io/blog/tailwind-criticism
isanjay 4y ago
If you don't like Tailwind. Try OpenProps css library
isanjay 4y ago
How do you guys manage DarkMode in Tailwind ?. using dark:bg-xxx or are there any better way ?
- agloe_dreams 4y ago
  There’s fundamentally two ways. First is what you just stated with the modifier. The second way is to redefine the colors with CSS vars and then write a normal CSS media class that re-wires what var means what color.
  - 5Qn8mNbc2FNCiVV 4y ago
    That's what I would do and use the dark: classes for adding borders and other styles that make dark themes work. F.e. shadows and floating cards doesn't really work with dark themes but does with light colors.
kuon 4y ago
I love tailwind. I would like the addition for perceptual color palette. I do it by hand with HSLuv and I redefine the colors, but having a built in way to build light on ark and dark on light contrast that look good regardless of hue would be cool.
- rmckayfleming 4y ago
  My understanding is that that's a non-trivial problem. You'd likely need some sort of AI system to do it, since the perception of colour isn't something that can be simply modelled.
  - kuon 4y ago
    Yes, it is not trivial, but some color space can help, see my article about it. https://www.kuon.ch/post/2020-03-08-hsluv/ https://www.kuon.ch/post/2020-03-08-hsluv/
emmacharp 4y ago
I'll post one of my previous comments here, hoping to get a discussion going... > The problem with Tailwind for me is that Mr Wathan misrepresented « Good CSS » in his essay. His examples are BAD CSS, not good CSS. He then sets out to correct a problem with CSS that HE created by writing dirt poor CSS. `.author-bio > div > h2 { color: red } is NOT good CSS. The div part has no reason being there (why would the div change the color of the title ?). After presenting this auto-created problem, he sets out to solve it with BEM, where you need untold numbers of classes for everything. So now, CSS has a naming problem, created to solve a non-existing auto-created CSS problem. And Tailwind now solves this pseudo-problem. Apart from this, the thing that really bugs me is that every advantage claimed (apart from one) is also non-existing because if you do your CSS right, the same claimed advantages arise in pure CSS. Design tokens ? No need for json, custom properties are all you need. Specificity ? Cascade layers, pseudo-selectors are here for you. The only "advantage" I see is the possibility of working in one file only rather than a couple of files. And that, for me at least, is not a real advantage but only a justification for being lazy. There's no way the price of all these processes and dependencies complexity are worth the laziness-added value. Does someone care to "prove" me wrong here ? At least, can someone engage these arguments ? Looking forward to it!
- kaba0 4y ago
  The problem is that I’m not convinced that “good CSS” even exists. Even the very idea of separating content and style seems problematic to me, and in my experience it simply doesn’t works for anything more complex than a markdown converted to html. Add to it that for some weird reason web’s style includes layouting, which imo should be a separate thing entirely, and this is the primary reason why any given CSS has to be specifically created for a given HTML template, and why seemingly benign CSS modifications can move that 3rd step of the checkout page, rendering it completely broken. Restricting CSS to a subset of only cascading some very basic properties (fonts, colors, default font-size), and letting everything else be managed on a per component basis (where close coupling of style and template absolutely makes sense) and simply layouting those components to form the given design makes much more sense to me (and frankly, it was sort of figured out a few decades ago by several desktop GUI framework..). And while you can write vanilla CSS this way, tailwind just restricts you to this subset — the same way there sure exists some safe subset of C, but you need something like Rust to restrict you to that [1] [1] I know, this is not really how it works, it’s only for the analogy’s sake
butt____hugger 4y ago
Tailwind is great for knowing which developers not to hire
- adithyasrin 4y ago
  Hiring an engineer based on a tool they use is a great way to end up hiring no one.
  - butt____hugger 4y ago
    It's more of an indicator of their (mis)understanding of basic fundamentals.
chrismorgan 4y ago
I’m surprised and a bit puzzled at what they’ve done with logical properties: they’ve completely ignored the existence of vertical writing modes (apart from single-corner border-radius, where you can’t), and named things in such a way that it would be ugly and inconsistent to subsequently support the block axis, since they’ve basically renamed inline-start and inline-end to start and end.
chatmasta 4y ago
Here's why I have no interest in trying Tailwind: - It's a DSL within a DSL, which as a rule of thumb I always avoid because it means circumventing any static analysis within the main language. The rest of my complaints are mostly derived from this fundamental issue. - It reminds me (not in a good way) of bootstrap classes circa 2011 - Unlike styled components, there is no static typing or intellisense as it circumvents the TS compiler. I'm sure Tailwind has its own solutions to this problem, but I have enough tooling to deal with already - It's an arcane "language" that needs to be learned in addition to every other language in your codebase, which makes it difficult to onboard new devs - A string value containing a long list of short identifiers does not make for readable nor maintainable code - In 2033, CSS will still be around. Nobody knows whether Tailwind will be, but if "reminds me of bootstrap" is any indication, the ecosystem will not be thriving. - It's not easy to remove from your project if you decide you don't want to use it anymore (unlike solutions that use CSS or object syles, which can be more readily swapped between frameworks, e.g. migrating from MUI to Emotion or from Emotion to CSS modules) - None of the problems it purports to solve are recognizable to me I know that people like Tailwind, but frankly I don't see why, and I suspect there may be some element of stockholm syndrome driving its popularity. And I'm always skeptical of any technology with culty vibes around it. As for me, my preferred solution is either CSS modules or emotion.js, using either CSS or styled objects, both of which are fully supported by intellisense and typechecking, and are based on a 25 year old standard language instead of a 3 year old DSL within that language.
- nickspicer1993 4y ago
  Have you tried it in earnest on a project? I was of the same opinion but once you try it (with VS Code and Tailwind plugin) it's hard not to fall in love with the ultra fast feedback loop and well defined colour palette.
  - qiller 4y ago
    It's definitely not for everyone. I'm on the fence, for example, I do like the utility based approach, but TW breaks a number of my common workflows. For example the feedback loop - I can't quickly add or change a few classes in devtools, since TW might not have compiled those yet. I can't also easily refer from the html code in devtools back to a component that rendered that without clutches (VueDevTools etc).
sickcodebruh 4y ago
I’ve read a decent amount about Tailwind and I really appreciate what it offers. I see all the claims of people who were unsure, tried it, and fell in love, and I don’t doubt their experiences. It seems great. The sad reality for me: I am very very productive with a mix of inline styles and Emotion/Styled-Components! I genuinely enjoy writing CSS. A library like MUI gives me a foundation of consistency and helpful utilities, but I love the ability to drop back into CSS and express ideas in a universal styling language that any experienced frontend developer should be able to understand. I move fast. I can show my code to others for feedback and they’ll be able to contribute. I genuinely enjoy it. Tailwind does offer some ways of writing CSS but my understanding from the docs is that they are discouraged. They certainly don’t give the ease and quick feedback of in-line or Emotion. I’m also highly suspicious of the longevity of the utility class approach and its shorthand. It makes me think of my experience with Slim templates in Ruby: it felt like a force multiplier at the time but but only other initiates appreciated it and it looked like absolute gibberish when I came back to it years later. These projects would have been better sticking with ERB since it’s the HTML everyone knows sprinkled with Ruby where needed. My initial impression of Tailwind is the same: “this looks crazy but everyone swears that it’s a breeze once you learn the syntax!” Will the end result be the same? Again, no disrespect to anyone who enjoys it. I fully recognize the many drawbacks of inline styles and Emotion, particularly around performance. I’m currently lamenting the incompatibility of Emotion and React Server Components. I plan on giving Tailwind a fair shot soon and I’m open to having my mind changed, but I do hope it has more staying power than Slim templates.
- chatmasta 4y ago
  This echoes my feelings exactly, but another aspect of it that turns me off is evident in the walking-on-eggshells qualifications you need to add to your comment to avoid being attacked by its "initiates." In comparison, my experience with adopting TypeScript was one where my initial skepticism was met with people clearly explaining the benefits of using it. And TypeScript has a similar aspect where you need to try it to really understand its benefits, but it also has clear value propositions that can be described and considered on their fundamental merits. Tailwind does not seem to have the same kind of benefits, so the arguments boil down to variants of "with us or against us" and "look at all these people using it." And from that perspective, I see a lot of people who I respect a lot who are _not_ using it. Whereas I never saw many experts saying "TypeScript sucks don't use it" - they just quietly adopted it because type safety was important to them on its merits.
sadn1ck 4y ago
It's hilarious how every Tailwind thread ends up looking the same somehow. Use it if you want. It's just a (very good!) tool which some people find useful. Thanks Adam and all the Tailwind contributors for your work!
heresjohnny 4y ago
Great to see yet another Tailwind version. I’m a huge fan. CSS is always a “get it over with” ordeal for me, and Tailwind allows me to finish the job in the quickest way. And Tailwind UI has been one of the best purchases I’ve made in the past year.
rcarr 4y ago
To the people moaning about “what is the benefit”: You ship less CSS, especially the more complex your app gets. A app built with custom classes ends up growing linearly, often with lots of repeated css code. With Tailwind, the amount of css added always ends up being logarithmic. It also ensures consistency across the codebase in both naming conventions and styling (e.g consistent spacing ratios) without seniors having to be vigilant about policing PRs. Finally, the majority of people who have tried it find it quicker and easier to code with. Which means you can ship more functionality in the same amount of time whilst maintaining the same or better styling standards. So there are three of the engineering benefits to using it. If you don’t like it and don’t want to use it, fine. But stop pretending that no one can give you good engineering reasons that justify it’s existence.
unsungNovelty 4y ago
I am gonna make it extremely direct and simple. CSS is a tool as Jeff Atwood would say designed for pit of despair[1]. Which means, the default path is making mistakes and failing horribly. And Tailwind CSS is a tool which is designed with Pit of Success in mind. This means, the default path is success and not anger and despair. Not to mention, it doesn't have any performance taxes. And also, unlike other CSS framework, you should know CSS in order to utilise Tailwind CSS properly. People learn more about CSS by using Tailwind unlike many other CSS frameworks. [1] - https://blog.codinghorror.com/falling-into-the-pit-of-success/ https://blog.codinghorror.com/falling-into-the-pit-of-succes...
Alifatisk 4y ago
I hope the Tailwind dart package gets updated soon

Tailwind CSS v3.3

165 points by adrian_mrd 4y ago

krvajal 4y ago

Tailwind v20 = just css

return_to_monke 4y ago
an argument for it is that it couples content and styling together, instead of them being in different layers. Sometimes, they are, and should be, separate. But in other cases, styling is related to the content, or part of it.
- megous 4y ago
  The only time I can imagine coupling content and styling together is if you have mostly non-repetitive elements in the content (rare, I think, maybe some very "designed" landing page, or whatnot), or you have other ways to repeat the elements without writing the styles out each time for each element. (And at that point you've just moved the problem of having to invent names for CSS classes to having to invent names for bunch of "components" and their properties)
  - illiarian 4y ago
    Any UI beyond trivial lists will couple style and content. You have a card? Boom, you need to couple styles for the title, for the content, for the footer etc. You have a form? Boom, you need to couple styles with the form. The idea that styles are somehow decoupled from content is funny idea that very rarely works out in practice.
    - megous 4y ago
      You missed the point. Would you copy paste around: <form class="asd fasdf e4rwe sfdg sdfgbbv cxvbxcs asdf asdf wer wer gfdghdfgh fgh"> 20x around your static website and keep it updated manually when someone "from design" wants to change the "form" look? Or would you just <form class="classic-form"> and describe the style of that class of form in a single place? I know what I'd do. :)
- The5thElephant 4y ago
  This is achievable in a much nicer way with SFC frameworks like Vue and Svelte where you also get scoped styles and other benefits. One of the reasons Tailwind is so popular is that so few developers know anything other than React.
  - illiarian 4y ago
    Tailwind works just as well in Svelte and Vue
    - The5thElephant 4y ago
      Of course it's just class names, what I mean is that if fewer people used React and more used Svelte/Vue they would feel less need for things like Tailwind or CSS-in-JS. My argument is that React is actively bad for writing HTML/CSS, and therefore people came up with clunky solutions to get around those limitations. Certainly Tailwind is more than just a solution for React, but a large part of its popularity is due to it.
      - illiarian 4y ago
        > they would feel less need for things like Tailwind or CSS-in-JS. Why do people keep mentioning Tailwind and CSS-in-JS in the same sentence? And no, Tailwind would still have its place even if Svelte appeared first because instead of writing the same styles everywhere you'd still want to extract them into a file, and have sensible defaults for them. Oh look, Tailwind does exactly that.
        The5thElephant 4y ago
        > Why do people keep mentioning Tailwind and CSS-in-JS in the same sentence? Because one of the biggest arguments for each is scoping styles to a component instead of the default global cascade. > And no, Tailwind would still have its place even if Svelte appeared first because instead of writing the same styles everywhere you'd still want to extract them into a file, and have sensible defaults for them. Writing same styles everywhere? I'm not sure I understand what you mean, that isn't related to Tailwind or frameworks. Sensible defaults are just design system tokens, those are usable in way more styling approaches than just Tailwind. I'm not saying Tailwind wouldn't exist, I'm saying it wouldn't be as wildly popular as it is now. React's lack of CSS features has encouraged a generation of frontend devs to simply not learn CSS fully. Sure you need to know some CSS to use Tailwind, but in many cases people just copy-paste Tailwind templates from elsewhere (another benefit of Tailwind) and don't actually understand the styling. I see Tailwind classes that do nothing in the wild all the time.
megaman821 4y ago
The spec authors should be looking at the popularity of Tailwind and be thinking of how to enhance the style attribute. Then Tailwind really could mostly be a bunch of CSS variables and inline styles.
- nfw2 4y ago
  I've been working on a library that is basically what you're describing: https://github.com/nealfwilliams/style-kit-n https://github.com/nealfwilliams/style-kit-n Feedback welcome
- err4nt 4y ago
  Tailwind depends on @apply in PostCSS to function, something that was never officially proposed for CSS, but has been killed by its author and we know for sure CSS won't do, for the reasons the author of the original @apply idea lists here: https://www.xanthir.com/b4o00 https://www.xanthir.com/b4o00 So we have known all along that this will never happen. It was rejected for some very good reasons before Tailwind began.

Varqu 4y ago

So tailwind at this point is basically just a bunch of custom CSS classes which are granular to the point of single CSS properties? How is that better, than just writing custom CSS classes for components + having some util CSS classes?

lmiller1990 4y ago
This is how it basically was since day 1. These comments always appear in Tailwind threads -- more often than not, the poster hasn't given Tailwind a good try. It's definitely worth building a few small projects - it looks and feels bad at first, but once you get used to using it, it's really hard to go back to anything else.
- champagnepapi 4y ago
  Agreed. I was a hater at first, but now I’ll never go back. Took me a couple months to get used to it. However i split my time between both frontend and backend.
- agos 4y ago
  I've built a few small projects with it, and as much as I love the design tokens the idea of having a CSS class for every value of every possible property feels like abusing CSS, and it makes it feel like it has the same complexity of css
  - withinboredom 4y ago
    that's how I felt until my first `dark:text-white`. I got 'dark mode' out of the box and only needed to change a few things. I didn't need to google how to set up the css, then define a whole new dark mode. I was able to do iteratively, right on the component I was changing. This made 'more work' on the dev side, but on the testing side, you just had to find a single instance of the component and verify it looked reasonable. I think the ability to mix up things like that is what makes it quite powerful. You don't have to go digging through your sources to find all instances of '.my-one-off-class-that-some-random-dev-also-used'.

iamsanteri 4y ago

I think the reason behind Tailwind’s emergence and prominence is React, mostly.

naiv 4y ago
I would say it is more the lower entry barrier for devs who do not want to spend time on learning css so they are not that relient anymore on a dedicated frontend person
- whiskey14 4y ago
  +1. Learnt CSS through tailwind much faster than I did when trying to learn raw CSS
  - rimliu 4y ago
    How do you know that?
- lewisflude 4y ago
  I'd say to be good with Tailwindcss you actually need a pretty comprehensive understanding of CSS already! Originally I'd written it off as "CSS for backend developers who hate writing frontend code" and I was a diehard CSS purist, but actually using it, it definitely has a great DX for people who love writing component UI/styling.
  - illiarian 4y ago
    I hate writing styling because I suck at design. But Tailwind works for me because: - it gives good defaults (from sizes and distances to color palettes) - it's documentation is heavenly, and helps you find the precise thing you're looking for in seconds I actually leveled up my understanding of CSS thanks to Tailwind :)
nness 4y ago
I agree, it feels like it was a reaction (no pun intended) for the CSS-in-JSS trend which started in React and complicated with Webpack pipelines. In my mind, Tailwind is just "Bootstrap for CSS-in-JSS." Honestly, as much as I disliked the CSS-in-JSS trend, it did solve a reasonable problem with React — one which Vue and others had solved with their SPC. It feels like ducktape on top of ducktape...

sjsanc 4y ago

Have there been any comparisons written about Tailwind's performance vs thoughtfully selected CSS? I've been writing Tailwind exclusively for the last year or so and I haven't noticed anything in particular, but I find that using utility classes causes me to lose an awareness of the cascading nature of CSS. Aside from the filesize bloat due to the bigger HTML files, do long and highly-repetitive class lists slow down style parsing or DOM interaction? And if so, would @apply directives have an advantage over class lists?

DanielHB 4y ago
I can't say much about selector performance besides that class selectors (.class-name) being very fast, opposed to complex selectors (like "#some-id > div a"). Of course less classes applied means less work for the browser, but the real cost is the complex selectors With regards to bloated HTML, that might seem the case but since you reuse the same class-names everywhere in your app (and tailwind JIT removes non-used classes), compression really cuts down on the size of your bundles. It just looks bloated in the web inspector. This is a disadvantage, it is a bit hard to debug HTML with all those class-name strings around, although I would say web-inspectors should just truncate "class" attr value With bundler performance it adds some overhead (tailwind has to go through all your .js/tsx files), but in my experience not noticeable

sophiabits 4y ago

I used Tailwind for the first time about a month and a half ago, reworking my blog from `styled-components` [1]. I had been avoiding it because--as other people have said--it looked really ugly and unmaintainable. I was pleasantly surprised by just how easy it was to get going, however, and my fears about it all ending up as an unmaintainable soup were unfounded. So I guess I'm a Tailwind convert :) It's very quick and easy to get stuff done using it--the design system is very well thought out. For internal dashboards I think you're still better off using an off the shelf component library like MUI, but Tailwind is a really good option for anything else imo. [1] https://sophiabits.com/blog/css-in-js-to-tailwind-better-web-vitals https://sophiabits.com/blog/css-in-js-to-tailwind-better-web...

bobmaxup 4y ago
> reworking my blog from `styled-components` > about a month and a half ago > unmaintainable soup were unfounded I see this a lot, but rarely with a qualification. How did it quell your fears about unmaintainability? What about tailwind makes it maintainable?
- sbergot 4y ago
  Not op but here is my take: - styling is scoped to your components. You won't break your UI trying to refactor rules & selectors - by default you don't need to invent class names. The components provide enough context - it forces you to make a selection of colors an spacing, leading to a more coherent style. - it is easier to understand than a lot of other css frameworks. It is just a "basic" rule generator with some QoL like automatically pruning the rules you are not using in the production code.
- sophiabits 4y ago
  Yeah, good question. At a high level I think the best analogy is React: when I first saw it, I wasn't entirely sure about mixing in HTML with my Javascript. It seemed strange. Now that I've been using React for years, however, collocating these things seems like the obviously correct thing to do. Tailwind is similar: instead of extracting styles out to a separated styled component or even a separate .scss file, you collocate them with the rest of your layout. When I read code using Tailwind it's easy for me to "see" how things will look in a similar way that I can "see" how a React component will function at run time. More concretely, I think these three things were important for me: 1. There's a really solid design system underpinning the Tailwind utility classes. With styled-components you start from nothing, and with off-the-shelf component libraries (e.g. MUI) you get a design system that isn't quite as well thought out. Tailwind's classes just work together really well out of the box because the defaults are so sensible. I'm not a designer, so this is a really big win for me. 2. Components help prevent class soup. I suspect I wouldn't enjoy Tailwind quite so much if I were writing plain HTML, but for things which _do_ need to be reusable like button styles I'm still writing code that looks like `<Button>...</Button>`. Nothing really changes here from styled-components -> Tailwind other than how the styles are written; they're equally maintainable. 3. One-off snowflake UIs are really easy to implement, because you can just write your classes right then and there. I've never worked on a nontrivial web application where _everything_ fits cleanly into the design system, and going through the ceremony of creating a styled component just to add a little bit of additional spacing is a pain. It also sucks for maintainability because a name like "Spacer" doesn't tell me anything about the styles, so I need to context switch and jump to the definition. In contrast, seeing "mx-2" instantly tells me what's happening. I do think Tailwind's something that benefits from first-hand experience, though.

lewisflude 4y ago

Really exciting release! Glad to see proper TypeScript support for the config files.

christophilus 4y ago

Tailwind threads are always the same. And like in all of them, I'm here to say I love Tailwind, and thank you to the devs! It's such a small thing, but the 950 color is a great addition. It's one of the areas where I've reached for my own classes, so I can eliminate yet another little bit of CSS from my codebase.

barrell 4y ago
Big ups for 950! This will get rid of a lot of unnecessarily transparent text in my codebases (black/95 etc). Now fingers crossed that at some point we see a 25. XD Edit: seconding sentiment of thanking the tailwind team <3
Kaotique 4y ago
I've tried them all. Vanilla CSS, SCSS, BEM, Bootstrap, Styled Components, different kinds of CSS in JS solutions and I still prefer Tailwind over the other methodologies and libraries because I don't have to think about abstractions and naming things. Abstractions are huge foot gun in frontend development because it kills all flexibility. With Styled Components or similar libraries you have to wrap all your components with all kinds of variants that inherit properties. Composition over inheritance is a huge benefit of Tailwind. The big problem with CSS is the specificity and if you ever worked on a real big project with BEM or vanilla CSS/SASS it will eventually become a huge mess of specificity and more and more specific nesting of class selectors to override other styles that you don't want. With Tailwind you can just add exactly what you want, nothing more, nothing less. Sure the html is "ugly" but that part is invisible. It is also very likely your bundle size will be smaller because it only adds the CSS for the helpers that you really used. Just my 2 cents I guess. People should use what they like.
Lockal 4y ago
950 color is kind of mad and arbitrary decision though. Why tailwind has color 50 and 950, but does not have 850? It is so common to have some `bg-gray-900` button on `bg-gray-800` background, and no way to slightly highlight the button (not to the level of background).
- 4y ago

nailer 4y ago

A reminder that if you’re having trouble naming divs, you have too many divs. Everywhere I’ve worked that used tailwind just kept adding wrappers around every ui element since they didn’t know css basics.

ar9av 4y ago

finally ESM. jesus. The internals are still CJS, but at least we can use it ESM.

b212 4y ago

I think Tailwind isn’t that great if you’re really proficient with CSS. But if you need backend devs to fiddle with styles or have some teammates who aren’t senior css magicians then it really shines. Anyway I’m not entirely sold, I feel good old Sass is way better than styled components and Tailwind, but only in right hands. It’s painfully easy to write unmaintainable styled components and Sass/CSS.

alli_star 4y ago
[dead]
stuckinhell 4y ago
Mastering flexbox seems to be what most people really need to do.
- illiarian 4y ago
  I've mastered flexbox thanks to Tailwind :)

vancroft 4y ago

I've tried Tailwind on smaller projects and it's not a bad way of writing styling. Not having to think about class naming or selectors speeds things up a bit, and it's nice that it promotes only shipping the styles you need (i.e. no classes with lots of the same properties declared). However, one thing I'm still wondering about is how easy it would be to maintain visual consistency in a large project with lots of components, and lots of different developers working on different parts of the app. Say the branding guidelines a certain style, like rounded corners with some shadowing and a hover styles, something that can't be done with a simple utility class. This should be consistent across many different components and pages. Then, someone in design updates the guidelines to have a different value for rounding and shadows. With Tailwind out of the box, each component now has to be updated separately, and developers have to remember, or at least be able to check in documentation if that exists, which components use this particular style. Is the answer then simply to use @apply for combinations of style? Doesn't this simply re-invent CSS classes, and create another layer of abstraction (you now have a class, which is composed of other classes, which themselves are composed of values set in custom properties). I'd be very interested to hear how people manage this in large teams, over time.

random_kris 4y ago
We defined Tailwind config overriding the default values to match our design system. Then on top of this we have components library with common basic components and layouts Then inside the apps we use the components and that Tailwind config and it works quite nice. We have rules for tokenized colors and sizes so it all references the config. There are problems and all, but all in all I think is quite good
- chiefalchemist 4y ago
  That makes sense, but what value does TW add? Why have that dependency? And not have the team roll your own CSS?
  - moomoo11 4y ago
    Because you can ship in a few days instead of wasting weeks trying to bike shed through something as basic as css. Use tailwind as a tool, have a component library that can be put together in a couple days max, and now you have ubiquitous styling language and don’t need to waste hours on css of all things. There are bigger fish to fry.

whoisjuan 4y ago

Even before opening this thread, I knew people would be talking shit about Tailwind. I don’t get why HN seems to dislike it so much. I’m just going to say that Tailwind, IMHO, is the best thing that has happened to CSS. It’s by far the simplest and cleanest abstraction of CSS, and it accomplishes a lot through a very straightforward implementation. At this point I can’t see myself writing CSS in any other way.

zagrebian 4y ago

Isn’t it ironic that the first section talks about extended color palettes, but their website does not honor my CSS (prefers-color-scheme: light) preference when I visit that page with JavaScript disabled. There is a moon icon in the upper right, but it’s broken without JS.

debarshri 4y ago

Coming from bootstrap, I would say if you are not using tailwind, you are missing out. It is just breathe of fresh air. But, but, but, seems like almost all the project that use tailwind ends up looking like linear. Not that I blame tailwind for that, there was an era when almost all bootstrap projects looked similar, I think it is the same thing.

rrosen326 4y ago
I just tried to switch a simple quick site from bootstrap to tailwind and backed out. It seemed like I had to build my base template from scratch whereas with bootstrap they give it to me for free. With tailwind, is there an easy way to start with a nice simple working responsive site that I can tweak?
Someone1234 4y ago
Which version of Bootstrap? Since BS5+ offers very similar CSS utility classes to Tailwind, but with no preprocessor step/tooling.

jerrygoyal 4y ago

would be nice if they had naming convention for classes so devs don't have to rely upon docs to find the right classname I wrote about it in a more detail: https://gourav.io/blog/tailwind-criticism https://gourav.io/blog/tailwind-criticism

isanjay 4y ago

If you don't like Tailwind. Try OpenProps css library

isanjay 4y ago

How do you guys manage DarkMode in Tailwind ?. using dark:bg-xxx or are there any better way ?

agloe_dreams 4y ago
There’s fundamentally two ways. First is what you just stated with the modifier. The second way is to redefine the colors with CSS vars and then write a normal CSS media class that re-wires what var means what color.
- 5Qn8mNbc2FNCiVV 4y ago
  That's what I would do and use the dark: classes for adding borders and other styles that make dark themes work. F.e. shadows and floating cards doesn't really work with dark themes but does with light colors.

kuon 4y ago

I love tailwind. I would like the addition for perceptual color palette. I do it by hand with HSLuv and I redefine the colors, but having a built in way to build light on ark and dark on light contrast that look good regardless of hue would be cool.

rmckayfleming 4y ago
My understanding is that that's a non-trivial problem. You'd likely need some sort of AI system to do it, since the perception of colour isn't something that can be simply modelled.
- kuon 4y ago
  Yes, it is not trivial, but some color space can help, see my article about it. https://www.kuon.ch/post/2020-03-08-hsluv/ https://www.kuon.ch/post/2020-03-08-hsluv/

emmacharp 4y ago

I'll post one of my previous comments here, hoping to get a discussion going... > The problem with Tailwind for me is that Mr Wathan misrepresented « Good CSS » in his essay. His examples are BAD CSS, not good CSS. He then sets out to correct a problem with CSS that HE created by writing dirt poor CSS. `.author-bio > div > h2 { color: red } is NOT good CSS. The div part has no reason being there (why would the div change the color of the title ?). After presenting this auto-created problem, he sets out to solve it with BEM, where you need untold numbers of classes for everything. So now, CSS has a naming problem, created to solve a non-existing auto-created CSS problem. And Tailwind now solves this pseudo-problem. Apart from this, the thing that really bugs me is that every advantage claimed (apart from one) is also non-existing because if you do your CSS right, the same claimed advantages arise in pure CSS. Design tokens ? No need for json, custom properties are all you need. Specificity ? Cascade layers, pseudo-selectors are here for you. The only "advantage" I see is the possibility of working in one file only rather than a couple of files. And that, for me at least, is not a real advantage but only a justification for being lazy. There's no way the price of all these processes and dependencies complexity are worth the laziness-added value. Does someone care to "prove" me wrong here ? At least, can someone engage these arguments ? Looking forward to it!

kaba0 4y ago
The problem is that I’m not convinced that “good CSS” even exists. Even the very idea of separating content and style seems problematic to me, and in my experience it simply doesn’t works for anything more complex than a markdown converted to html. Add to it that for some weird reason web’s style includes layouting, which imo should be a separate thing entirely, and this is the primary reason why any given CSS has to be specifically created for a given HTML template, and why seemingly benign CSS modifications can move that 3rd step of the checkout page, rendering it completely broken. Restricting CSS to a subset of only cascading some very basic properties (fonts, colors, default font-size), and letting everything else be managed on a per component basis (where close coupling of style and template absolutely makes sense) and simply layouting those components to form the given design makes much more sense to me (and frankly, it was sort of figured out a few decades ago by several desktop GUI framework..). And while you can write vanilla CSS this way, tailwind just restricts you to this subset — the same way there sure exists some safe subset of C, but you need something like Rust to restrict you to that [1] [1] I know, this is not really how it works, it’s only for the analogy’s sake

butt____hugger 4y ago

Tailwind is great for knowing which developers not to hire

adithyasrin 4y ago
Hiring an engineer based on a tool they use is a great way to end up hiring no one.
- butt____hugger 4y ago
  It's more of an indicator of their (mis)understanding of basic fundamentals.

chrismorgan 4y ago

I’m surprised and a bit puzzled at what they’ve done with logical properties: they’ve completely ignored the existence of vertical writing modes (apart from single-corner border-radius, where you can’t), and named things in such a way that it would be ugly and inconsistent to subsequently support the block axis, since they’ve basically renamed inline-start and inline-end to start and end.

chatmasta 4y ago

Here's why I have no interest in trying Tailwind: - It's a DSL within a DSL, which as a rule of thumb I always avoid because it means circumventing any static analysis within the main language. The rest of my complaints are mostly derived from this fundamental issue. - It reminds me (not in a good way) of bootstrap classes circa 2011 - Unlike styled components, there is no static typing or intellisense as it circumvents the TS compiler. I'm sure Tailwind has its own solutions to this problem, but I have enough tooling to deal with already - It's an arcane "language" that needs to be learned in addition to every other language in your codebase, which makes it difficult to onboard new devs - A string value containing a long list of short identifiers does not make for readable nor maintainable code - In 2033, CSS will still be around. Nobody knows whether Tailwind will be, but if "reminds me of bootstrap" is any indication, the ecosystem will not be thriving. - It's not easy to remove from your project if you decide you don't want to use it anymore (unlike solutions that use CSS or object syles, which can be more readily swapped between frameworks, e.g. migrating from MUI to Emotion or from Emotion to CSS modules) - None of the problems it purports to solve are recognizable to me I know that people like Tailwind, but frankly I don't see why, and I suspect there may be some element of stockholm syndrome driving its popularity. And I'm always skeptical of any technology with culty vibes around it. As for me, my preferred solution is either CSS modules or emotion.js, using either CSS or styled objects, both of which are fully supported by intellisense and typechecking, and are based on a 25 year old standard language instead of a 3 year old DSL within that language.

nickspicer1993 4y ago
Have you tried it in earnest on a project? I was of the same opinion but once you try it (with VS Code and Tailwind plugin) it's hard not to fall in love with the ultra fast feedback loop and well defined colour palette.
- qiller 4y ago
  It's definitely not for everyone. I'm on the fence, for example, I do like the utility based approach, but TW breaks a number of my common workflows. For example the feedback loop - I can't quickly add or change a few classes in devtools, since TW might not have compiled those yet. I can't also easily refer from the html code in devtools back to a component that rendered that without clutches (VueDevTools etc).

sickcodebruh 4y ago

I’ve read a decent amount about Tailwind and I really appreciate what it offers. I see all the claims of people who were unsure, tried it, and fell in love, and I don’t doubt their experiences. It seems great. The sad reality for me: I am very very productive with a mix of inline styles and Emotion/Styled-Components! I genuinely enjoy writing CSS. A library like MUI gives me a foundation of consistency and helpful utilities, but I love the ability to drop back into CSS and express ideas in a universal styling language that any experienced frontend developer should be able to understand. I move fast. I can show my code to others for feedback and they’ll be able to contribute. I genuinely enjoy it. Tailwind does offer some ways of writing CSS but my understanding from the docs is that they are discouraged. They certainly don’t give the ease and quick feedback of in-line or Emotion. I’m also highly suspicious of the longevity of the utility class approach and its shorthand. It makes me think of my experience with Slim templates in Ruby: it felt like a force multiplier at the time but but only other initiates appreciated it and it looked like absolute gibberish when I came back to it years later. These projects would have been better sticking with ERB since it’s the HTML everyone knows sprinkled with Ruby where needed. My initial impression of Tailwind is the same: “this looks crazy but everyone swears that it’s a breeze once you learn the syntax!” Will the end result be the same? Again, no disrespect to anyone who enjoys it. I fully recognize the many drawbacks of inline styles and Emotion, particularly around performance. I’m currently lamenting the incompatibility of Emotion and React Server Components. I plan on giving Tailwind a fair shot soon and I’m open to having my mind changed, but I do hope it has more staying power than Slim templates.

chatmasta 4y ago
This echoes my feelings exactly, but another aspect of it that turns me off is evident in the walking-on-eggshells qualifications you need to add to your comment to avoid being attacked by its "initiates." In comparison, my experience with adopting TypeScript was one where my initial skepticism was met with people clearly explaining the benefits of using it. And TypeScript has a similar aspect where you need to try it to really understand its benefits, but it also has clear value propositions that can be described and considered on their fundamental merits. Tailwind does not seem to have the same kind of benefits, so the arguments boil down to variants of "with us or against us" and "look at all these people using it." And from that perspective, I see a lot of people who I respect a lot who are _not_ using it. Whereas I never saw many experts saying "TypeScript sucks don't use it" - they just quietly adopted it because type safety was important to them on its merits.

sadn1ck 4y ago

It's hilarious how every Tailwind thread ends up looking the same somehow. Use it if you want. It's just a (very good!) tool which some people find useful. Thanks Adam and all the Tailwind contributors for your work!

heresjohnny 4y ago

Great to see yet another Tailwind version. I’m a huge fan. CSS is always a “get it over with” ordeal for me, and Tailwind allows me to finish the job in the quickest way. And Tailwind UI has been one of the best purchases I’ve made in the past year.

rcarr 4y ago

To the people moaning about “what is the benefit”: You ship less CSS, especially the more complex your app gets. A app built with custom classes ends up growing linearly, often with lots of repeated css code. With Tailwind, the amount of css added always ends up being logarithmic. It also ensures consistency across the codebase in both naming conventions and styling (e.g consistent spacing ratios) without seniors having to be vigilant about policing PRs. Finally, the majority of people who have tried it find it quicker and easier to code with. Which means you can ship more functionality in the same amount of time whilst maintaining the same or better styling standards. So there are three of the engineering benefits to using it. If you don’t like it and don’t want to use it, fine. But stop pretending that no one can give you good engineering reasons that justify it’s existence.

unsungNovelty 4y ago

I am gonna make it extremely direct and simple. CSS is a tool as Jeff Atwood would say designed for pit of despair[1]. Which means, the default path is making mistakes and failing horribly. And Tailwind CSS is a tool which is designed with Pit of Success in mind. This means, the default path is success and not anger and despair. Not to mention, it doesn't have any performance taxes. And also, unlike other CSS framework, you should know CSS in order to utilise Tailwind CSS properly. People learn more about CSS by using Tailwind unlike many other CSS frameworks. [1] - https://blog.codinghorror.com/falling-into-the-pit-of-success/ https://blog.codinghorror.com/falling-into-the-pit-of-succes...

Alifatisk 4y ago

I hope the Tailwind dart package gets updated soon