13 ms·

Tailwind CSS v4.0

• rglullis 2y ago
  "Build times reduced", "no more @tailwind directives", "No more js configuration", "Designed for the modern web". To me, this screams "CSS now can do everything we used to do ourselves, but let's keep pretending that we are still needed somehow"
  • bitpush 2y ago
    Really!? Is that really what you got out of it? I understand you're not a fan of Tailwind, so perhaps say what you dont like about Tailwind instead of creating a strawman and attacking it. Also, shame on you for poo-pooing on someone else's open source project and people find useful.
    • mc3301 2y ago
      Yeah, I tried (not so hard) to like and use tailwind, but I've been using bootstrap for so long, and for my very simple needs, bootstrap was a better choice. But I wouldn't go around saying, "tailwind is unnecessary for everyone."
      • notjoemama 2y ago
        I'm with you. Tailwind would be great if it could be SASS'd but Tailwind is a post processor and it would be silly to build a post-post processor just to make tailwind reusable. It simply isn't a good tool for large enterprise applications. Toys, home projects, sure. But then, why learn CSS twice for occasional use? Until they solve the post processor problem, I'll stick with bootstrap. But if they do, I would definitely switch. That would be the best of both worlds.
    • rglullis 2y ago
      "What I don't like about Tailwind" has less to do with Tailwind itself and more about the violation of separation of content and presentation that they push so hard. > poo-pooing on someone else's open source project This is not some young kid doing free software out of kindness. This is a company making millions of dollars in revenue in a closed source product (tailwind UI), which is built on a foundation (tailwindCSS) that is becoming less and less needed.
      • yCombLinks 2y ago
        Often content and presentation are part of the same package. In these cases, separating them makes maintenance of sites harder.
      • BeetleB 2y ago
        > and more about the violation of separation of content and presentation that they push so hard. As someone who's done it both ways with web sites, that separation sucked. Having to figure out which style in my CSS file was messing things up was always a pain. And Tailwind tends to be "local" by default, limiting the damage done to other elements when I style an element. In my larger experience (not just with web sites), whether separating content and presentation is a good idea varies widely from use case to use case.
  • crummy 2y ago
    What did you need Tailwind for before that you couldn't do in normal CSS? Doesn't Tailwind map pretty much 1:1 to CSS?
    • ervine 2y ago
      Yes.
    • BeetleB 2y ago
      > Doesn't Tailwind map pretty much 1:1 to CSS? Much of it does, but not all of it.
      • _heimdall 2y ago
        Do you have an example that Tailwind can do that can't be done in CSS?
        • BeetleB 2y ago
          I'm going off a claim from the Tailwind site :-) The original question wasn't whether Tailwind can do something CSS can't, but whether it was a 1:1 mapping. Can regular CSS do media queries all within the element's style attribute? I believe Tailwind also utilizes JS to get some convenience features to work.
          • _heimdall 2y ago
            Oh gotcha, I must have just misunderstood the previous comment. I want to say that tailwind also can't do inline media queries, but that's getting really nitpicky and pedantic. You can at least add a class inline that Tailwind creates a media query for in CSS, that is really handy.
          • yurishimo 2y ago
            Tailwind doesn't generate any JS at all. The final build is 100% CSS.
    • rayrrr 2y ago
  • crooked-v 2y ago
    "Basically just inline CSS, but less fiddly and much more optimizable than the style attribute" was always the selling point of Tailwind in the first place.
    • rglullis 2y ago
      Then, yes. But nowadays CSS is a lot more powerful and has caught up. So why bother with Tailwind?
      • Sateeshm 2y ago
        Because of multitude of reasons. One of the big ones being never having to search through a style tag or finding a CSS file. 100% of the element styling is described in the element markup. Tailwind was never about filling gaps in CSS.
        • someothherguyy 2y ago
          That is atomic CSS, and it predates tailwind by quite a bit. There is a huge marketing push behind tailwind. If you look into who made it, you'd see it wasn't their first attempt.
      • BeetleB 2y ago
        Do you have any links describing what you mean? I'm not a CSS guru, and perhaps I know only the "old" CSS. I did recently learn Tailwind and it's way nicer than the "old" CSS. If modern CSS makes styling as easy as Tailwind does, I'd love to read about it.
      • buzzerbetrayed 2y ago
        Why do you keep saying CSS has “caught up”? Tailwind has always just mapped to CSS, so you’ve always been able to do anything in CSS that you could do in tailwind. What has CSS done that makes you see no value in Tailwind today where you used to see value?
      • jitl 2y ago
        CSS has become more confusing over time, not less confusing, so the upside of a utility class approach like Tailwind is also improving over time rather than decreasing. Tailwind solves css confusion by presenting a “paved road” for many tasks. Want to do “thing”? Just look up “thing” in the tailwind docs, add “thing-2” to your class, done in 2 minutes. Rather than look up “thing” on google, skim several articles, then write 4-10 lines of CSS, done in 30 minutes. As CSS has gotten more complexity from new capabilities, solving various tasks with it feels more and more like a research project. Like centering a div vertically and horizontally - there’s now 3-4 generations of solutions for this task: 1. Hacky stuff with position: absolute or floats 2. Flexbox approach. Hope you remember the 6 different attributes you need to set! Oh, there’s a new shorthand for flex now? Cool! More stuff to learn. 3. Grid approach. There are a bunch of different ways to structure a grid centering approach. Hope you remember how grid templates work! With tailwind, just add 2 classes, done.
  • crowcroft 2y ago
    If you going to hate on it, at least try understand what it is and why people use it.
    • rglullis 2y ago
      It's not "hate". It's just that I don't see the value that it brings today.
      • ervine 2y ago
        Whether you enjoy utility classes isn't really related at all to what css supports.
        • rglullis 2y ago
          Maybe you are making my point? If tailwind was "just utility classes", fine. But what business would it be there if they just published a bunch of CSS files with their styles? With modern CSS, what problem are they really solving now?
          • kyleyeats 2y ago
            As someone who made a competing product along these lines (that got no attention or traction): Tailwind gives CSS a "place" in the codebase. It benefits orgs, not necessarily apps. I didn't get it at first either. But it's very useful to the people to whom it's useful.
            • rglullis 2y ago
              > Tailwind gives CSS a "place" in the codebase. It benefits orgs, not necessarily apps. That is a better argument. But couldn't we be able to achieve that by, e.g: - Create one standard HTML document with a predefined structure and including all the web components needed by your product. - Having all designers and frontend developers developing their CSS (or SCSS) against this single base document This would be basically the CSS Zen Garden approach. It would still keep separation of content and styling and it would create a "place" for styling code.
• cadamsdotcom 2y ago
  Thanks Tailwind devs! It’s a testament to the success of the concept and the quality and consistency of execution over a seriously long time, that Tailwind became how LLMs write code for the web. Congrats on the release.
  • harlanlewis 2y ago
    Yes, I’m a huge fan of how easy it is to whip up quick isolated prototypes in Claude artifacts. There’s a risk of breaking changes in libs causing frustration in larger codebases, though. I’ve been working with LLMs in a Nextjs App Router codebase for about a year, and regularly struggle with models trained primarily on the older Pages Router. LLMs often produce incompatible or even mixed compatibility code. It really doesn’t matter which side of the fence your code is on, both are polluted by the other. More recent and more powerful models are getting better, but even SOTA reasoning models don’t totally solve this. Lately I’ve taken to regularly including a text file that spells out various dependency versions and why they matter in LLM context, but there’s only so much it can do currently to overcome the weight of training on dated material. I imagine tools like Cursor will get better at doing that for us silently in the future. There’s an interesting tension brewing between keeping dependencies up to date, especially in the volatile and brittle front end world, vs writing code the LLMs are trained on.
• pupppet 2y ago
  I appreciate there are people who find Tailwind useful and are productive with it, but it has this clean yet generic look that I now see everywhere, because Tailwind is now everywhere.
  • sadmanca 2y ago
    I feel like that's a good thing, because Tailwind's options are well-thought and work well. I like to think of it in the same way as Inter being the new Helvetica when it comes to choosing a font for a website: lots of people do it, and it looks great, so why not?
  • Sateeshm 2y ago
    Tailwind gives you sensible defaults, but doesn't really influence your design too much. People just tend to design the sites a certain way. Especially, with ShadCn.
  • gkoberger 2y ago
    This is conflating Tailwind and TailwindUI/shadcn/etc. For the most part, Tailwind offers no more influence over style than normal CSS (okay, there's some exceptions... things like shadows are a bit more standardized, and indigo has gotten outside influence on color palettes as of late).
  • harrall 2y ago
    I heard this comment about Bootstrap back this in the day but none of my Bootstrap sites looked like each other. Bootstrap saved me a lot of time because it had a lot of utility classes (like Tailwind way before Tailwind) and it never enforced a certain look. You just loaded the classes that you wanted (unless you didn’t download the source Sass files, but that would have been silly).
  • Zanfa 2y ago
    The same way everything looked like Bootstrap a decade ago.
  • cloverich 2y ago
    My take on this problem is, good UI frameworks (i.e. tailwind + components) are still rare. So the vast majority of projects use a very small number of them. If 4-5 new quality UI projects popped up, especially if they departed more in their styling, we'd see more diversity. I've come to realize with design, like much creative work, the trends really do seem to be set by a shockingly small number of people. I wish more people realized this, because I feel there are talented individuals out there not making their own, thinking they'll never be heard. But I suspect some of those people would be unlocking new UI's for a large chunk of the web if they would give it a go.
• nakovet 2y ago
  I love tailwind, used in 3 projects in the past 4 years, it’s intuitive, well documented, simple. I don’t miss the days of emotion and styled components where I would have to think of a name for every styled div in the project, with tailwind a container is just a div and a few classes nothing else. Less bike shedding discussion, less brain cycles spent naming things, less time wasted in reviews.
  • notjoemama 2y ago
    > a few classes You must be working with very good product owners then. The ones I've worked with love to specify the hell out of every possible detail. Like a web form is their personal HGTV renovation. I tried tailwind once and the classes ended up being an order of magnitude more than the markup. It got hard to read, quickly.
    • lowercased 2y ago
      you can use @apply to merge the various utility classes together in to something resembling a name, like .btn-primary { @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75; } But their v3 docs seem to be very against this. "Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse." Reasons: * You have to think up class names all the time — nothing will slow you down or drain your energy like coming up with a class name for something that doesn’t deserve to be named. * You have to jump between multiple files to make changes — which is a way bigger workflow killer than you’d think before co-locating everything together. * Changing styles is scarier — CSS is global, are you sure you can change the min-width value in that class without breaking something in another part of the site? Yet... my experience using projects that use tailwind is that every button everywhere is styled the same way, but it's repeated in multiple areas. The 'kinda ugly' part, but also... it's repeated in multiple places. Trying to change the universal focus behaviour of buttons in a project like this is hard, because... I can't search focus:outline-none without finding everything that has 'focus:outline-none' on it. I can't just search/replace, because it'll impact other stuff. So I end up spending way too much time trawling through way too many scattered specific styles all over a codebase, vs having a defined 'btn' style someplace. "well, that's just the project's fault"... possibly, but it seems to be the promoted/preferred/evangelized way of using tailwind, judging by the projects I've had to get involved with the past few years. IME, this approach may have good short term benefits, but poorer longer term maintenance, doubly so when the original people are no longer involved in the project, and outsiders have to come in to deal with it.
• sadmanca 2y ago
  Heck yeah, cool to see Tailwind add support for transitions without Javascript. As a burgeoning web developer, dealing with animation libraries seems like it's not worth the effort (or at least not for something as simple as a blog), so this is much appreciated.
• atonse 2y ago
  Looking forward to integrating this into my elixir projects!
• ChrisArchitect 2y ago
  Title is: Tailwind CSS v4.0
• davidw 2y ago
  Question for people who are good at CSS stuff. I am not. I'm upgrading a personal Phoenix project to 1.7, and Phoenix now uses Tailwind by default. So I thought I'd try and update my one page thing to use it instead of Bootstrap. So far, it looks like crap whereas the Bootstrap one looked 'good enough'. What's the easiest way to get something that looks kinda sorta decent, with some nice defaults, without trying to become a designer? Or should I just reinstall Bootstrap and be done with this.
  • bitshaker 2y ago
    Put your HEEx into a LLM. They understand both Bootstrap and Tailwind very well. It will probably not be too hard.
  • moojacob 2y ago
    If your looking for components like bootstrap try https://flowbite.com/ https://flowbite.com/ for free. Tailwind also has paid components. You just copy and paste. The cool part is once you get more comfortable you can start to tweak the flowbite components.
  • bushido 2y ago
    Tailwind and Bootstrap and are kinda apple vs apple pie. Tailwind provides classes that still need to be stacked to build components. It'd be easier if you were using some source for UI components, I've used TailwindUI in the past, but that's paid. I'm sure there are good free alternatives.
    • bebop 2y ago
      A friend of mine who is good at these things recommended https://mantine.dev/ https://mantine.dev/
  • kyleee 2y ago
    I’d say it depends on who is paying you. If you have job security and want to tinker, then play with tailwind if you want (most trendy / loud people seem to like tailwind). If however you are working on your own project / are self funded / or have a deadline just stick with bootstrap that you know, and focus on getting your work done instead of bike shedding on the UI
• iansinnott 2y ago
  Migration guide, if anyone is wondering: https://tailwindcss.com/docs/upgrade-guide https://tailwindcss.com/docs/upgrade-guide Some breaking changes in there. May want to hold off on upgrading until LLMs come around to writing v4 code with ease.
  • NiloCK 2y ago
    This reservation has taken firm hold on me and has made me a slower adopter of shiny new things. I feel alright about it from a local perspective (I'm a lot more productive now than I was before), but I do wonder what it does to the overall dynamic and incentive to write shiny new things or generally update the ecosystem. The LLMs will get more powerful, but to what extent will their work be dominated by existing tools (with lots of existent human-generated exemplar)?
    • hipadev23 2y ago
      LLMs have already plateaued in knowledge imo. There’s far less reason for humans to contribute code examples, answer questions, work on open-source projects, or even produce content knowing it’ll immediately be slurped up and resold. Web dev will be stuck with React and Tailwind circa 2021 for a very long time.
    • verdverm 2y ago
      We shouldn't really have to retrain models for them to be able to work with new versions of libraries or frameworks. That seems like a flaw in the LLM (only?) setup. One should probably be using RAG at a minimum to pull in the correct documentation and references. Something like Kapa, but not limited to a single project https://www.kapa.ai/ https://www.kapa.ai/
  • koito17 2y ago
    Renaming utilities like flex-shrink-* makes existing LLMs emit deprecated code today and broken code tomorrow. I wonder what the rationale is behind the renaming of various utilities (e.g. shadow-sm -> shadow-xs, flex-shrink -> shrink, decoration-slice -> box-decoration-slice, ...) In new projects, I will probably use Tailwind v4 and constantly provide the upgrade guide as context to an LLM. In existing projects, I will continue to use Tailwind v3 until I am certain that it works alongside the tools used by my framework (React Router / Remix).
• todd3834 2y ago
  I’m a recent convert to tailwind. I’m very comfortable with css and I was initially turned off on the huge horizontal lines I saw in tailwind projects. However, more and more component libraries are based on tailwind so I decided to try some immersion therapy. Here are the top things I enjoy that was not obvious to me: 1. The class names are css shortcuts. Using them save you a lot of time. This is probably obvious to anyone who’s seriously looked at tailwind but I didn’t see that browsing the docs. I just saw nightmarishly long lines. 2. The lines look longer when you are not familiar with the class names. I initially pulled all of my class names out into a string outside my markup and included similar to how I’m used to using emotioncss. This made tailwind tolerable for me at first. However after several days I started to feel less turned off by those lines. I think it’s because I could recognize them. I will still break down a line with something like clsx. 3. clsx helps so much vs trying to entirely rely on tailwind syntax. The docs don’t discourage this at all but for some reason I thought it wasn’t idiomatic tailwind at first. 4. My app has to support a very large number of themes. Tailwind has proven to be a very attractive way of solving this problem. CSS variables are cool but the long syntax of using them is helped a lot in tailwind. 5. Adding my own custom variants is so easy and made me feel like a power user with such a small learning curve. All of this is just my two cents to guide anyone who is like me watching from the sideline and wondering why? Why would anyone ever want to tolerate those “disgusting long lines mixed into the html”. Neo, all I see is the lady in the red dress now
  • Sateeshm 2y ago
    It's sort of like javascript devs ignoring typescript because they never felt like they needed it. But once you start using it, it's difficult to go back. I was in never ts/tailwind gang for a few years until I tried them.
• jaredcwhite 2y ago
  As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to see the huge strides they've made with v4. Being able to access the Tailwind theme through native CSS variables (they even have an example in the docs of a button component written in native CSS in an external stylesheet using native variables! Oh happy day!) is absolutely massive, and being able to use a CSS-only config is equally amazing. Finally, Tailwind feels more like it's a utility (ironic, since its claim to fame is utility classes!) which you can add to any project, rather than some bizarro "viral" framework that wants to eat sensible architectures and lives in its own JavaScript-y silo. Perhaps all the criticism over the years actually had an effect. Or maybe they finally arrived at good conclusions on their own. Either way, I suspect many of the pro/anti-Tailwind arguments are no longer relevant, and that's a Very Good Thing. Now we can get down to business and ship product.
  • tipiirai 2y ago
    > I suspect many of the pro/anti-Tailwind arguments are no longer relevant I feel there are two issues with Tailwind for me as a designer / design engineer. * First, JavaScript/Tailwind engineers have hijacked the conversation on design. Instead of "utility-first," "dead code elimination," and "type-safe CSS" I focus more on desing systems. Whether to use Perfect Fifth or Perfect Fourth in typography for example. * Second, Tailwind makes it impossible for me to participate in the actual craft. Design decisions get buried in React components with cryptic expressions like `flex items-center shadow-lg p-6 hover:bg-gray-50 dark:bg-gray-800 py-[calc(theme(spacing[2.5])-1px)]`. This might make sense for JavaScript engineers, but blocks/makes it hard for systematic design. Instead of expressing precise mathematical relationships through CSS, we're essentially writing inline styles with better ergonomics.
    • skydhash 2y ago
      Maybe Tailwind is useful for bigger projects, but I tend to prefer component based class instead. The biggest DX for CSS is using the web inspector and directly modifying the DOM, then copying the adjusted values to the text editor. For a much serious project, I go with the balsamiq -> figma route to create an actual design system.
• deleted 2y ago
  [deleted]
• andrewmcwatters 2y ago
  Tailwind is mind-boggling to me. Like something that would be written by someone who doesn’t actually write a lot of HTML or CSS. Bootstrap is bad enough, where you end up using 4, 5, 6 classes for display, margin, padding alterations to existing components. It’s just unreadable crap. No wonder it’s popular though. Most people suck at designing. The ones that don’t aren’t using Tailwind.
  • intrasight 2y ago
    >The ones that don’t aren’t using Tailwind. True. And they're not using HTML or CSS either.
• robertwt7 2y ago
  so much love for tailwind! I've used it since version 1 and have been always my default for starting new projects. Congrats to tailwind team!
• bitbasher 2y ago
  Last time I tried v4 the automatic content detection was pretty bad. It would falsely detect tailwind classes if it seen a similar name in a string in a code file. It seemed pretty dumb.
  • dcre 2y ago
    That is more or less how it worked in v3 already, because any string could be used as a CSS class. "The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name." https://v3.tailwindcss.com/docs/content-configuration#class-detection-in-depth https://v3.tailwindcss.com/docs/content-configuration#class-... The only difference in v4 is that scanning is so fast, they just scan roughly everything by default. You can still opt into manually specifying which files to scan. https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned https://tailwindcss.com/docs/detecting-classes-in-source-fil...
    • silverwind 2y ago
      In v3, one can use `blocklist` in the config to eliminate false-positives, but with the config file gone, this seems no longer possible, so I won't be upgrading. In one project, roughly 75% of the detections were false-positives, unnecessarily bloating the CSS.
      • dcre 2y ago
        You can disable automatic detection and manually configure which files to look at: https://tailwindcss.com/docs/detecting-classes-in-source-files#disabling-automatic-detection https://tailwindcss.com/docs/detecting-classes-in-source-fil...
        • bitbasher 2y ago
          This seems like the best path forward if you're using v4.
• pier25 2y ago
  Personally I'm not interested in using Tailwind but my main criticism is that it didn't go far enough in its approach. Instead of using classes (which are extremely limiting) they should have created their own language like Imba did (inspired by TW). https://imba.io/ https://imba.io/
• dang 2y ago
  Recent and related: Tailwind CSS v4.0 Beta 1 - https://news.ycombinator.com/item?id=42210553 https://news.ycombinator.com/item?id=42210553 - Nov 2024 (125 comments)
• rayrrr 2y ago
  To some extent, reading between the lines of many of these comments, I think “pure CSS” designers are feeling threatened by the quality level of Tailwind sites designed by the rest of us.
  • tipiirai 2y ago
    It's worse. React killed the craft of design engineering because everything is JavaScript. CSS develoeprs are gone.
    • jitl 2y ago
      Design engineers still exist, they just write more JS these days. They are still building UI and design systems and teaching craft & supporting full stack teams. The craft is there, but the tools are different.
      • tipiirai 2y ago
        True — they just need to be more engineers than designers.
        • jitl 2y ago
          I don’t think putting html in one file and css in another file makes you more or less of a designer than putting both html and css into a single file.
          • tipiirai 2y ago
            Switching from CSS based design systems to large TypeScript monoliths requires you to learn one or two things about engineering
          • yoz-y 2y ago
            I think the approach is different. Component style applications have to thing about all component presentation separately, web apps ressemble apps more than documents (d’uh) so it makes sense that they are designed as such. Documents are designed holistically, you don’t care that much about how a thing (say, an image that is an aside) would look on the next page because on the next page there would be something completely different. I think much of the debate and contention comes from the fact that many developers only worked on either web apps, or documents (e.g.: static blog, cms) and each try to convince the other group that their approach is the best.
• mythz 2y ago
  Was it really necessary to break all existing apps using `npx @tailwindcss`? It's an easy enough change to `npx @tailwindcss/cli` but we now have to go back and update all Apps and templates and since it uses v4 we now have to test every App to see if anything's broken with a v4 major release. Given its massive install base, surprised they wouldn't maintain backward compatibility with v3 and have an explicit opt-in upgrade path to v4. Edit: v4 did actually break all our Tailwind Apps which doesn't support `@import "tailwindcss"`, likely because we use `npx tailwindcss` without any local npm dependencies. Trying to use the existing v3 `@tailwind components` renders a useless app.css. Only solution atm is to explicitly use v3 and change all our build scripts to use `npx tailwindcss@v3`.
  • jitl 2y ago
    You’re doing something silly living without a lock file to use a tool as part of your build process. Why don’t you actually include the version of the tool you want in your dev dependencies + lock file? That way, you don’t get broken. We’ve had the solution to this problem - lock files - for 15ish years, since Ruby’s `bundle` introduced it.
    • mythz 2y ago
      Not everything is a node App. We don't have a lock file because we don't have any local npm dependencies (as already mentioned). We're using `npx tailwindcss` as-is.
      • jitl 2y ago
        You clearly have a dependency on tailwindcss (if it can break you, you depend on it), and are using npm to fetch it (npx uses npm internally, they are installed together) so you can easily solve your problem by adding a couple json files with some version numbers in them. npx will pick up and use the version from your package.json, so no workflow change other than running `npm install …` once to generate package.json for your preferred semver specifier, and package-lock.json to guarantee your builds use a known-good version from now on.
• tlrobinson 2y ago
  Tailwind’s abuse of CSS classes as a DSL has always felt like a hack to me. You shouldn’t need a special editor extension to get highlighting/autocomplete/etc, just use TypeScript and a CSS-in-TS solution.
  • darkhorse13 2y ago
    > just use TypeScript and a CSS-in-TS solution THIS is the definition of a hack to me, so yeah.
    • dbbk 2y ago
      May be a hack but it just works.
• bern4444 2y ago
  My initial reaction to Tailwind was: what a pain. I already know CSS, now I have to learn CSS again... I imagine its how parents might feel when they go to help their children with math homework only to find the math is now totally different from when they were in school and their methods (while still valid) for solving problems are no longer accepted by the school and their child is annoyed by having to reconcile the two systems... I get the, tailwind works well in a team and scales nicely and you just have to use it, mentality. I've experienced it. I still prefer a plain style sheets that targets elements by a class or tag (especially since CSS supports nested selectors!). There is an issue in managing stylesheets, and for that I really like how Remix/React Router manages CSS where CSS flies are defined and applied at the route level. Where that isn't enough or dynamic styles are too complex for a .css file: style={{...}} is always available. CSS is so powerful, flexible, and extensible, tailwind feels like a limitation rather than an enhancement. I don't understand the continued appeal, but clearly many others do. I'm not sure why, but I am confident we'll all have moved on to something else in another 3 or 4 years too.
  • sebmellen 2y ago
    Limitation reduces available complexity and that’s why tailwind wins. It’s a composable, standardized, and modularized wrapper around a very massive and complex system. That’s a big advancement.
  • jitl 2y ago
    I agree it’s frustrating initially to re-learn CSS… I used to make the same arguments. But after contributing to an open-source project using Tailwind I got up to speed, and now I feel differently. Tailwind is essentially just stenography for style={{…}} - a single utility takes 15 characters that would take multiple lines in a .css file or style object. It greatly reduces the amount of time I need to spend googling stuff like “visual text replacement css” or perusing various css cheat sheets or skimming through css-tricks blog posts from 8 years ago. Instead I always go to tailwind docs, and quickly learn the utility class that just does the thing I want. A surprising amount of it fits in my brain cache, much more than trying to cache the css for all the tasks I might need to do in a layout.
  • 2y ago
• kaeshiwaza 2y ago
  Locality of behavior can be done with few lines of js. https://github.com/gnat/css-scope-inline https://github.com/gnat/css-scope-inline
  • vim-guru 2y ago
    I assume that you don't even need javascript after a few releases of Firefox. All other major players support scoped styles. https://developer.mozilla.org/en-US/docs/Web/CSS/@scope https://developer.mozilla.org/en-US/docs/Web/CSS/@scope https://caniuse.com/?search=%40scope https://caniuse.com/?search=%40scope
• hit8run 2y ago
  I like tailwind but think it’s not needed anymore as CSS got better. Utility frameworks don’t necessarily need a build step. I forked and finished Tachyons successor Tachyons 5: It has container queries built in and p3 colors. https://github.com/gobijan/tachyons5/blob/main/tachyons5.css https://github.com/gobijan/tachyons5/blob/main/tachyons5.css If you need very sophisticated layouts write them in plain css. For quick styling utilities are awesome. Unpopular opinion. Now downvote me to the ground.
• croisillon 2y ago
  Text of TFA is cropped on my Safari (iPhone 7), a bit ironic init?
• lelanthran 2y ago
  Question for those developers who, like me, have no f/end build step: How would I use tailwind without a f/end build step? All the examples of using tailwind 4.0 on the linked site assume a f/end build step. My project does not use (and I have no plans to include) npm, or PostCSS, etc.
  • rahkiin 2y ago
    For a static site I have, I manually run the Tailwind tool when I include new classes. It generates style css and I commit this file to git.
    • lelanthran 2y ago
      Thanks; I actually did not know there was one until you and the sibling poster told me. To anyone else with the same question: See https://tailwindcss.com/blog/standalone-cli https://tailwindcss.com/blog/standalone-cli
  • stevoski 2y ago
    This is what keeps me from using Tailwind too. I simply do not want to add the maintenance headaches of an npm-based build process to my project.
    • lelanthran 2y ago
      > I simply do not want to add the maintenance headaches of an npm-based build process to my project. Apparently I was just too blind to find it - here is how you can (presumably) use tailwind without pulling in npm and node.js. https://tailwindcss.com/blog/standalone-cli https://tailwindcss.com/blog/standalone-cli
    • GrzegorzWidla 2y ago
      Vite dev, preview and build scripts make it so stupidly simple that I can’t believe people don’t pull it for all, including the simplest, sites. Plus I couldn’t imagine developing without TypeScript and hot reloads in 2025.
• hmans 2y ago
  [dead]
• vim-guru 2y ago
  CSS has become significantly more user-friendly than in the past, with most browsers now behaving consistently. It's worth learning as there is no build step involved, and it avoids cluttering your markup with excessive code. You could opt to use style attributes directly within your HTML. Historically, we avoided this to maintain a separation of concerns, but it's puzzling why some prefer reintroducing similar methods. Is it just to save a few keystrokes? Using style attributes even seems more straightforward since it doesn't require translating code in your head. I simply don't see the appeal.
  • morbicer 2y ago
    There's a bunch of things you can't do with style attributes, just to pick a few: - Pseudo-classes (e.g., :hover, :focus) - Pseudo-elements (e.g., ::before, ::after) - Media queries - Keyframes and animations And the DX in a larger project isn't great either. On the other hand, this upcoming standard is a great addition for collocating styles https://developer.mozilla.org/en-US/docs/Web/CSS/@scope https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
    • nilslindemann 2y ago
      https://developer.mozilla.org/en-US/docs/Web/CSS/@layer https://developer.mozilla.org/en-US/docs/Web/CSS/@layer also solves a lot of problems.
      • jeanlucas 2y ago
        Indeed, it also solves a lot of problems
  • tipiirai 2y ago
    It's because we've normalized React and tight coupling. Styling belongs to components, not in design systems. I feel the JavaScript-first engineering ecosystem needs brave new design-led companies, who see the power of modern CSS and systematic design.
  • aembleton 2y ago
• amai 2y ago
  See also https://daisyui.com/ https://daisyui.com/
  • notracks 2y ago
    I heard that Daisyui v5 is ditching Tailwind so now it's just pure CSS.
    • amai 2y ago
      The Daisy UI 5 beta release is still based on Tailwind 4 "First Install Tailwind CSS 4 beta" https://v5.daisyui.com/docs/v5-beta/ https://v5.daisyui.com/docs/v5-beta/
• silverwind 2y ago
  Did they really nuke the entire js config file? I have a number of advanced use cases that depend on it, like eliminating false-positive content matches.
  • thijsvandien 2y ago
    You can still use it if you want, but most of the time it’s not needed anymore.
• asimpletune 2y ago
  I used tailwind for my site and ended up liking it a lot, but maybe for reasons that are not often mentioned? The real value of tailwind is being able to read all the styles that affect a an element in one place. Sure the classnames can get long, but it’s still a lot faster to read that long line, than open the browser tools each time or scroll up and down one (or many) stylesheets. Then when you come back to that code later, you can confidently edit it without worrying about causing changes to other elements. The cascading nature of CSS is still helpful, but I find that I usually want to limit my styling to just one element. For all the rest I go back to css but I wrote very little css because I usually just want to get the whitespace right.
  • topicseed 2y ago
    I kind of agree but the same problem exists. If you add text-xl to a div and have nested divs and spans, they'll all be inheriting text-xl so for these nested elements, you also have to look up the element's lineage to find what's causing the text-xl. But overall it's a bit easier yes.
    • javier123454321 2y ago
      That's the css cascade, not a tailwind issue.
  • jitl 2y ago
    I think that is exactly why tailwind is good and nice. Although I also like that it makes “how do I do X?” a quick doc search instead of a 30 minute research project
  • twelve40 2y ago
    > real value of tailwind is being able to read all the styles that affect a an element in one place there are helpers for that in the IDE (e.g., "Show Applied Styles for Tag" in Intellij) or even in chrome dev tools that show all this in a readable way. Tailwind snippets mentioned in this HN topic look kind of scary in comparison.
    • 2y ago
• gr__or 2y ago
  Tailwind is a testament to the greatness of inline styles (styling a thing without naming it), the universality of strings and also the limits of strings. I am excited for what comes after it, until then I'll use Tailwind (reluctantly)
• Fred27 2y ago
  Tailwind suits the kind of developers who hack things together and build up technical debt and spaghetti code rather thinking about things first and designing things properly.
  • whstl 2y ago
    I don't know. In 20+ years I have seen way more abominations and spaghetti CSS using other every CSS technique. With Tailwind at least I know what to expect, and the code in practice rarely deviates from what it's supposed to look like. I'm all for "not building up technical debt" and "thinking about things first" but in my personal experience the anti-Tailwind crowd doesn't have much to show here in this regard. Sure: it's theoretically possible to build a perfect CSS ivory tower, I just haven't seen even a passable one in a non-trivial project, it always devolves into a mess for various reasons... often breaking the rules of the paradigms like BEM and OOCSS, often because of cutting corners here and there. Addendum: I'm all for criticising techniques, but it's interesting that the anti-Tailwind crowd always resorts to attacking the character of the developers that use it.
    • christophilus 2y ago
      Same. Been doing this for 20+ years. I’ve worked at companies whose names are recognized and respected. My current Tailwind project is by far the most maintainable one I’ve worked on when it comes to CSS.
      • whstl 2y ago
        Exactly. I don't know why, and perhaps in theory it should suck indeed! But in the end it just works.
    • ozim 2y ago
      I feel like it is the same with ORMs argument is always "they don't know proper SQL so they use ORM instead". Which usually from people I know is they do know SQL and ORM and "no ORM crowd" doesn't have much to show. Exactly the same with Tailwind, I see coworkers doing Tailwind and knowing CSS well and not being "pure vegan CSS developers". But on the other hand we don't hire people who would utter such things like "no ORM" or "no framework" because those were also as in experience people who would create technical debt for others to deal with.
• KronisLV 2y ago
  I'm not the biggest fan of Tailwind or anything, but good job on the release! Fewer dependencies and better performance are always welcome!
• ptsd_dalmatian 2y ago
  Tailwind and Sveltekit are the reason why I still love doing FE after all these years. Initially I was so sceptical of TW. I simply can't work without it now. Huge thank you to authors for their hard work.
• xutopia 2y ago
  Anyone who has ever had to deal with CSS over time knows that the biggest issue is having leftover classes. Utility first approach means this never happens.
• sureglymop 2y ago
  I think the reason why tailwind is as popular as it is, is because it really ties in with the "change something, save, then immediately see the result" loop and dx of modern day web development. Yes, this works with regular css too but it's the fact that you can do bigger changes inline quickly without making up a class (and god forbid you already have a different class affecting the same element and it gets hairy). Personally I think this is nice, it's great to immediately see results and then adjust. But dx is not the only thing that matters and there are tradeoffs too. Personally I would use tailwind for personal projects but I don't think I would try to introduce it at work.
  • bythreads 2y ago
    And thereby you kill all inheritance, that is the while point of css. I find it more magic to change a single class at root and have the entire design reflow (on purpose) - Its beautifull when combined with shadowdom and wc
    • sureglymop 2y ago
      I think that's a good point that I've even struggled with in practice. What I would really want is to be able to write tailwind css classes but then have it automatically turned into regular css that makes sense on save. I really don't like coming up with class names and such.
• MortyWaves 2y ago
  This changes the colour palette again. They do this almost every major release. Starting to become a liability: upgrading will change your colours.
• intellix 2y ago
  Tailwind is CSS that cleans itself up as you go
• 0xblinq 2y ago
  There's a clear pattern in every "Tailwind or not tailwind" conversation (which happens everytime Tailwind is mentioned). There's those that never used it for more than 30 minutes, that just tried it out or just skimmed through the docs. Those are the people that hate it and prefer "vanilla CSS" or similar. Then there's the people that actually used it for a real project, within a team with more than 1 single person. Those are the people that understand its value, accept its trade offs and love it. I've seen a lot of people jump from the first group to the second group. I've seen almost none jump from the second to the first. That's why Tailwind is so successful. It might not be beautiful in the eye of the purist, but it's absolutely fantastic in the eye of the builder and pragmatic.
  • Francute 2y ago
    I think I don't fit in either of your groups. I’m not against Tailwind, but I didn't used it yet because I struggle to see why it's a better approach compared to other options like Web Components or React Styled Components. The biggest issue I have with Tailwind is how it clutters the HTML with a ton of utility classes making the HTML harder to read and maintain. Of course I see Tailwind being better than using large global CSS files with the classic CSS approach of naming html tags. But we do have ways where the CSS is scoped to a component without polluting the global namespace. Like Web Components and Styled Components. Both keep styles tied directly to the component (or more general, a specific group of html tags), making it easy to see which styles apply where. And yes, with them there’s no need for global class names, without having to worry about unwanted side effects or clashes. If I remove a component, I also remove its associated styles without worrying about unused CSS being left behind since both are tied together. Plus, there’s no risk of one component's styles unintentionally affecting another (thanks to shadow DOMs). I really value keeping HTML very short and readable by not mixing presentational styles directly in the markup. Tailwind’s approach, where the styling is all in the class attributes, makes the HTML feel cluttered, especially when you have long class lists on a single line, and GOD forbid you have actual class names to use there. It’s harder to understand what styles are applied at a glance since you cant even have it well indented, and it clearly reminds many reasons why we moved away from the inline style attribute in HTML in the first place. (Yes, we didn't left it for its limitations like pseudo classes and @media queries, they didn't even exist, we didn't add those new features because no one wanted to get back to those inline styling) So, while I don’t hate Tailwind, I just don’t see the clear advantages over Web Components or Styled Components in terms of readability, maintainability, and separation of concerns, while I do have important unanswered important concerns about using it... Yes, I've read the docs but never tried it out, I don't hate it, but I can't understand why I would choose it over other options. The fact of having a million classes in the middle of plain HTML makes them both unreadable for me. And No, I don't like huge CSS files either, or the classic approach of using them. But it is hard for me to see why tailwind is a better approach than working with Web Components, or React with Styled components. These two approaches allows me to not have to read presentational things in the middle of my html, and allow my html to be more clear and readable. I don't have to use CSS class names, it's easy to identify which CSS applies where, so, if you remove the component, you remove the CSS too, you don't end serving unused CSS rules. Each can have CSS not leaking to the global scope, and there is no risk on changing styles of another element... So, there is no hate for me, but it is very hard for me to see the benefits of tailwind over these two approaches, and I really dislike the idea of having to read html elements with huge styling rules cluttering my html files, and worse, having all of them in a single line makin it hard to understand all the applied styling. We left using style tag from HTML mostly for that reason, and not because of its current limitations (like not being able to use pseudo classes, media, etc)
• Parfait__ 2y ago
  I'll stick with 3, not rewriting so much of the codebase because taking away features is now an improvement. Not sure where dogma and performance overlap but it isn't in making @apply a hassle.