32 ms·

Tailwind CSS v3.0

• brainzap 5y ago
  How do I make a button? I am too dumb to get the simple button working.
  • ___q 5y ago
    Well that's easy, silly! <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> Sign in </button> A real joy compared to writing CSS, lemme tell ya.
    • adamwathan 5y ago
      It's fewer than half as many characters as writing the same thing in CSS: .btn { display: inline-flex; justify-content: center; padding: 8px 16px; border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); font-size: 14px; border-radius: 6px; color: #fff; background-color: rgb(79 70 229); } .btn:hover { background-color: rgb(67 56 202); outline: 2px dotted transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(99 102 241), 0 1px 2px 0 rgb(0 0 0 / 0.05); }
      • deleted 5y ago
        [deleted]
      • guanzo 5y ago
        It's also all on one line which makes it harder to read than your example and massively bloats the HTML. I prefer readability over conciseness.
        • adamwathan 5y ago
          You can break it across as few or as many lines as you like, just like with CSS. .btn { display: inline-flex; justify-content: center; padding: 8px 16px; border: 1px solid transparent; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); font-size: 14px; border-radius: 6px; color: #fff; background-color: rgb(79 70 229) } .btn:hover { background-color: rgb(67 56 202); outline: 2px dotted transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(99 102 241), 0 1px 2px 0 rgb(0 0 0 / 0.05) } <button class=" inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-white text-sm font-medium bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 "> Submit </button> My experience (and the experience of thousands of others) is that in practice, an approach like Tailwind is much more maintainable, even if it's superficially ugly. At the end of the day it's a lot easier to understand what's happening in a template where you can see all of the styles directly attached to each node instead of having to map things together in your head across multiple files. For example, for me at least I can't believe how much more difficult it is to look at your average CodePen demo and understand what is doing what at a glance vs. looking at a Tailwind template. With traditional CSS there is just _so_ much indirection in comparison.
      • dalmo3 5y ago
        And in 1/10th as many keystrokes with the vscode extension and autocomplete. Well done my friend.
      • another_story 5y ago
        Not OP, but I'm not worried about saving how many characters I type. We have autocomplete that fixes much of that problem anyways. I'm more worries about being able to read things others have written or even my own code when I come back to it. I tried Tailwind, and get the praise, but I still find it takes more time to read and understand than CSS. It just seems cluttered, and I couldn't get over that.
  • gherkinnn 5y ago
    <button class="px-3 py-2 bg-green-300 text-green-900">hello, brainzap</button>
• acro5piano 5y ago
  I love it
• asimpletune 5y ago
  Is there a link showing the delta between v2 and v3?
  • asimpletune 5y ago
    From reading the blog post, it looks like they took most of the things that were experimental or first class plugins and graduated then into being native.
  • yurishimo 5y ago
    Here is the Upgrade Guide[0] and the Changelog[1] 0: https://tailwindcss.com/docs/upgrade-guide https://tailwindcss.com/docs/upgrade-guide 1: https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md https://github.com/tailwindlabs/tailwindcss/blob/master/CHAN...
• zackbloom 5y ago
  Having used it pre-release, the JIT compiler is really incredible. It makes Tailwind a sea-change when compared to Bootstrap and the other, similar, CSS toolkits.
• awestroke 5y ago
  Since I learned to write semantic class names, and to compose using scss or react components, Tailwind feels like it would be a big step back. I get that it would be kind of nice to prototype in, but is anybody here using it for complex apps or UIs?
  • dkryptr 5y ago
    I work on a large Next.js project that has at least 100 custom made components all using Tailwind CSS. It is, without a doubt, the best way to iterate and make changes. I will never go back to manual stylesheets. Having a separate CSS stylesheet feels like context switching and breaks the flow of development in my opinion.
    • autonomousErwin 5y ago
      Super bizarre - I've found the opposite. I really like Tailwinds, it's great for getting up and running quickly if you're a one-person-team but as our team's grown, readability becomes quite a big issue (it's just not as clear as pure CSS/SCSS I find)
  • 5e92cb50239222b 5y ago
    It's been discussed to death in the past. https://news.ycombinator.com/item?id=22422873 https://news.ycombinator.com/item?id=22422873 https://news.ycombinator.com/item?id=28004515 https://news.ycombinator.com/item?id=28004515 https://news.ycombinator.com/item?id=18084013 https://news.ycombinator.com/item?id=18084013 https://news.ycombinator.com/item?id=26422286 https://news.ycombinator.com/item?id=26422286 https://news.ycombinator.com/item?id=25332101 https://news.ycombinator.com/item?id=25332101 From reading the previous threads, large projects are where it (apparently) really shines. Personally I didn't find it useful at all, but obviously YMMV.
  • cschmidt 5y ago
    If you're using components, then it works great. The css is local to each component, and you only have to make changes in a single place. I'm just doing a fairly simple app, but I can see it scaling well to larger projects.
• savanaly 5y ago
  For those that don't know, the laundry list of new stuff is probably all enabled by the first item in the list, just-in-time compilation. This means anything they can dream up can be included as a utility class, without bloating the compile time of the 99% of projects that will never use the feature (also without bloating the css package size, but that's not new since shaking out dead classes for prod has been a thing since forever).
• loeg 5y ago
  (Formerly: dupe of https://news.ycombinator.com/item?id=29501125 https://news.ycombinator.com/item?id=29501125 . The comments have now been merged.)
  • gnabgib 5y ago
    Other one is actually the dupe (posted slightly later, and a poor URL choice), but has gained more traction
• ipaddr 5y ago
  I just started using tailwinds. I found the daisyui plug-in to simplify the classes required and they add in the missing components.
• yurishimo 5y ago
  Really happy to see this before the end of the year. The JIT improvements and comprehensive arbitrary value support will no doubt come in handy for quick one-off projects or bespoke landing pages. I'm happy they have also expounded upon some of the more common FAQs on the homepage, including the extraction to components.
• gunshowmo 5y ago
  Looks fantastic. My only concern using this in a full React project is its lack of interoperability with standard libraries. It seems like for the best experience, you either buy Tailwind UI to use with a tailwind project for anything except the most basic UIs, reimplement the Tailwind UI components yourself, or have a weird mix of css-in-js and Tailwind CSS. Although I love the idea of HTML-native inputs all the way through, I tend to immediately run into issues where using a native interface instead of a JS-based implementation harms the user experience. Props to the team though - I feel like this is something I'll try out for a marketing site.
  • tshaddox 5y ago
    These days don't most popular React UI frameworks support passing classes to all the HTML elements they render?
    • gunshowmo 5y ago
      They do based on what I've seen, you're right. I'm speaking more to the consistency of styling across the project, but if the UI library is separated out from the rest of the project then it shouldn't actually be a concern to compose the components with tailwind-styled elements. Thanks for helping me think through it further!
  • crooked-v 5y ago
    You may be interested in Chakra UI (https://chakra-ui.com https://chakra-ui.com), which has low-level details (including default theming) basically identical to Tailwind CSS v2 but is built around css-in-js via Emotion.
    • nwienert 5y ago
      Shameless self-plug but if you'd like the same idea but that works with native as well and has an optimizing compiler that outputs clean CSS at build-time, try Tamagui (https://tamagui.dev https://tamagui.dev).
• gedy 5y ago
  I really like Tailwind, and was excited to use it for a new application at our company. However, I find the lack of standard component classes (modal, card, button, wherever) pretty limiting. This makes it difficult to have open source Tailwind components that can be imported and themed differently for your apps. Even after buying Tailwind UI, they are basically just code samples that we'd have to copy into our own libraries and maintain. Again it's a really cool library, but feel the approach is probably better for smaller apps and teams. Daisy UI might help with this, but seems pretty small at the moment. https://daisyui.com/ https://daisyui.com/
  • nomdep 5y ago
    There is a headless (meaning unstyled) set of components from the same authors: https://headlessui.dev/ https://headlessui.dev/
    • gedy 5y ago
      Thanks, yes but so few components compared to other solutions
• 1_player 5y ago
  Before you ask, as it happens in every Tailwind post, what is the point of this when CSS "promotes" reuse and separation of concerns, have a look at @ 5e92cb50239222b comment: https://news.ycombinator.com/item?id=29501650 https://news.ycombinator.com/item?id=29501650 And let me repeat what every Tailwind fanboy (like me) states every time this project is on HN: don't knock it till you've tried it. Look at the animated example in the front page. You'll never be able to iterate that quickly with CSS.
  • zodiakzz 5y ago
    If you have a hammer... I am able to iterate orders of magnitude faster in Adobe Photoshop. Back and forth feedback with the customer and then the end result gets coded in non-spaghetti reusable, themeable HTML/CSS. Seems you're iterating at the wrong phase.
    • crate_barre 5y ago
      Depends. I’ve never used Tailwind, so I’ll entertain your aside. If you are mostly doing flat design, truthfully you should be designing in HTML/CSS/JS. This is a failure of setting expectations for designers. If you can get developers to learn Leetcode, get designers to code their designs. Design in the browser with browser technology, it’s just boxes, gradients and shadows for industrial level web design at the moment. You really shouldn’t even be designing in a tool like Photoshop or Figma given the current design paradigms. You will not iterate faster than what I am suggesting. Edit: The reason why we are here, why something like Tailwind and MUI exist, is mostly because we need an abstraction layer to do what a designer does on a whim. You can flick a shadow on and off on a Photoshop layer and mess with the subtlety of a drop shadow with a slider. If a designer makes a fickle change, the developer needs this abstraction to make the fickle change as fickle as the thought that made it. That’s why you have all these quick utility methods. The designer is one layer (no pun intended) removed. In 2021 (2022 really), it’s shocking the amount of latitude we give designers to still not be able to do CSS. A half competent designer could have a modest style sheet that mostly captures their design instincts, yet here we are, unable to capture their whims and must now have an albatross utility library to have manual laborers capture the translation - all because … they still won’t learn basic shit. And for what ultimately? These aren’t baroque art pieces, it is ultimately boxes with an aesthetic applied, all very describable with semantic HTML and CSS. But alas, our brilliant artists can’t be bothered. Here, send me your masterpiece so I can transform it for you. Take the bootcamp on web dev. You are literally the people I want going there. Not the Classics major that needs money because they picked a stupid major. It’s you guys that need it, and deserve it.
• lewantmontreal 5y ago
  Has there ever been a front-end library/product so polished? The landing page and even this announcement and the video is just wow.
  • notahacker 5y ago
    Ironically, I had the opposite opinion on clicking the link to the blog. Sure, a Galaxy Fold is a pretty niche user device, but its genuinely the worst first impression of a mobile website I've ever seen, with everything weirdly scaled to sit in a narrow portion of my screen (other dimensions linked to px values on the video embeds maybe?). Had to load the link a few times to confirm I hadn't just accidentally zoomed out, since if I do zoom in it looks like a normal mobile stylesheet https://pasteboard.co/V0Cy3etIngpY.jpg https://pasteboard.co/V0Cy3etIngpY.jpg
• 5cott0 5y ago
  Been a fan since V1 and to this day all I ever use are @apply and utility classes.
• ___q 5y ago
  Arbitrary Properties (inline styles) can now use constraints (css vars), media queries, and hover/focus states, the reasons Tailwind said you should use their utility classes instead of inline styles in the first place :) https://tailwindcss.com/docs/utility-first#why-not-just-use-inline-styles https://tailwindcss.com/docs/utility-first#why-not-just-use-... https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties https://tailwindcss.com/docs/adding-custom-styles#arbitrary-...
• manishsharan 5y ago
  I used to use Zurb Foundation or Bootstrap for my personal projects but I found these two frameworks required me to use their javascript and their JS does not play nice always. So I moved to Bulma and that has served me well so far. I like not having to worry about CSS (it drives me nuts) and I would like to just focus on building components and functionality. Is TailwindUI an alternate to Bulma ?
  • Tajnymag 5y ago
    Bulma operates at a bit higher level of abstraction than tailwind.
  • spiffytech 5y ago
    > Is TailwindUI an alternate to Bulma ? Kind-of. People usually pick one or the other, but they're not alternatives in the same sense as Bulma vs. Bootstrap vs. Zurb Foundation. Bulma has opinions about structure and style, and its value proposition is providing out-of-the-box components so you can skip spending brain cycles on that design work. At a high level, Bulma believes projects reuse a lot of design patterns, and those shouldn't have to be rethought each time you need them. Tailwind doesn't care what you want your project to look like, or how it's structured. Tailwind's value proposition is streamlining you choosing your own design, and removing footguns from that process. At a high level, Tailwind believes cookie-cutter styles are typically less reusable than you hope, that you should instead optimize for tailoring design patterns to each place they're used, and that style reuse is better implemented by e.g., React components than a CSS framework.
• weakwire 5y ago
  Great! but the docs are on the offensive side: - "Yes, send me all your stupid updates" - "The new print modifier lets you style how your site should look when animals(in strikethrough) people print it."
  • skellera 5y ago
    When did playful become offensive?
    • weakwire 5y ago
      Because by definition offensive has to do with how people receive something. I love the library, will continue using and donate, I would prefer the docs not to assume that people that print papers are animals. That's all! Take it or leave it.
      • kevin_thibedeau 5y ago
        They are.
      • deleted 5y ago
        [deleted]
      • greenie_beans 5y ago
        i read that as sarcasm delivering a subtle critique on digital consumption in 2021 and how print has been killed by digital media (for most folks). obviously they acknowledge that people still want to read in print, otherwise, why would they bother to add this feature? maybe i'm reading into it too much, but i don't think they think print readers are inferior.
      • CRConrad 5y ago
        But people are animals. Apes, to be specific.
  • ___q 5y ago
    Well it's not like they're expecting people to pay for...oh $279 for the UI kit eh?
• rekoros 5y ago
  Tailwind made it possible for me (backend developer) to write somewhat maintainable frontend code. It’s a joy to use both as a writer and reader.
  • spoils19 5y ago
    Speaking as a non-cargo culting developer, Tailwind is evil. It doesn’t understand CSS nor the document hierarchy it depends on, and almost every project that has had a frontend developer touch it has turned into an unmaintainable mess. Not to mention the tooling overhead. I had to revert countless JSP files due to strange compilation bugs that resulted in classes only sometimes(?) being added.
    • nanna 5y ago
      > Speaking as a non-cargo culting developer Remember the HN comment guidelines? > Be kind. Don't be snarky. Have curious conversation; don't cross-examine. Please don't fulminate. Please don't sneer, including at the rest of the community. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
      • deleted 5y ago
        [deleted]
    • aidos 5y ago
      It’s not traditional css and you need to accept that if you want to work with it. It has a load of benefits in a different dimension to css, and personally I think they’re worth the trade off. My main issue with it is the inability to control the order of precedence with the css rules. It’s mostly fine, but when you have runtime rules around, say, colouring text based on a few different variables, it turns into a bit of mess. Unfortunately because of the way it works there’s no way to implement “last rule wins” at runtime.
      • JasonCannon 5y ago
        I use tailwind with Angular, and we solve this with using [ngClass] to add/remove the class. You could do something similar with plain JS as well, and I imagine in most frameworks. Although yes, that is annoying to have to deal with.
• fadikhadra 5y ago
  Congrats on the release, keep up the great work!
• seanwilson 5y ago
  I used the JIT version recently on a new landing page with code completion for class names in my IDE and found it great. The distance between what I'm picturing in my head and what I have to type to see that on the screen felt so much shorter and less fatiguing than the standard CSS approach. With the regular way, to style something that's probably not going to appear elsewhere, I'm having to: come up with class names, annotate the HTML with them, repeat some of this annotating in a CSS file, jump back and forth between files to tweak the styles, use the web inspector to figure out which CSS class is overriding another then jump to the right CSS file to fix it etc. Tailwind classes are also faster to type and flip between when you're experimenting (e.g. editing "mt-5" to "pb-3" vs "margin-top: 4.25em" to "padding-bottom: 2.75em") and you get less distracted because it has sensible defaults and helpful guardrails (you rarely need all the possible attributes and range of parameter values CSS has available). I also rarely had the super irritating and common CSS scenario where you edit a style and it doesn't change and you have to go investigate to find out why e.g. something is overriding something, your selector is wrong, and even after all that maybe you undo the edit because it doesn't look good. Plus you no longer have the fear that tweaking a shared class to going to break some completely different page. I feel that beyond some building blocks, trying to create reusable CSS classes with cascading styles has similarities to using excessive abstraction and deep OOP class hierarchies in regular programming languages to avoid a little duplication. I also don't have a problem with styling stuff appearing in my HTML files either as long as the right HTML tags are used around the data. HTML files are already full of class annotations and divs that are only there for styling yet this doesn't cause a problem to e.g. browsers, screen readers or crawlers.
  • z3t4 5y ago
    The trick with CSS is to write semantic HTML and avoid div, span and css classes. You can of course inline css too (used mostly for optimization to prevent layout shift, but is also fine for elements/classes that are not repeated, such as the top menu, top banner/intro and header/footer)
    • seanwilson 5y ago
      > The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. No large website today works otherwise. HTML is still semantic when it contains styling markup (in the sense that a computer can read and understand the structured data from it) so I'm unclear what benefit is being missed out on. Whether you call a class "home-cta-subheading" or "text-center" so you can apply some styles doesn't make a difference to screen readers, browsers or search crawlers either.
• rgbrgb 5y ago
  Tailwind always looks like a cool evolution of Tachyons [0] to me (with a build step). On the other hand, tachyons is really simple, you just drop it into your project with no build required (or drop the sass in), and I've never really felt like it was missing any features I wanted. Has anyone used both seriously who can compare? [0]: https://tachyons.io/ https://tachyons.io/
  • sebmellen 5y ago
    Tailwind is more like an editorialized version of all the features available in "vanilla CSS" than it is a UI library. Tachyons is a small, tiny UI library that enforces (ugly) standard defaults. Also, the naming of classes in Tailwind feels much more natural — the tachyons naming is condensed to the point of being abstruse.
  • edmcnulty101 5y ago
    Hey great question! I was wondering that as well! They're both considered 'functional CSS' libraries. I used Tachyons after spending 5 minutes trying to figure out the build process for Tailwind and Tachyons worked great for the single site I used it on.
  • sph 5y ago
    I wanted to love tachyons before Tailwind was a thing. I jumped to Tailwind as soon as it released because it was configurable. The tachyons way of changing the defaults, such as colours or breakpoints, last I checked years ago, was using search/replace or forking the repo and adding your changes. Eh, no thanks. Tailwind is better in every way, and JIT is a killer feature.
    • porker 5y ago
      > Tailwind is better in every way, and JIT is a killer feature. I dunno, the smaller dev build from JIT is great, but it breaks my in-browser design workflow. Only the CSS styles needed are generated, so I can't make in-browser tweaks to see what a different padding/margin/other-property looks like.
• keewee7 5y ago
  The thing that made Bootstrap click for me years ago as a backend developer were these complete example layouts: https://getbootstrap.com/docs/5.1/examples/ https://getbootstrap.com/docs/5.1/examples/ Is there anything similar for Tailwind CSS?
  • belter 5y ago
    Not exactly the same but close? https://tailwindui.com/ https://tailwindui.com/
  • fgblanch 5y ago
    What about tailwind UI components? https://tailwindui.com/#components https://tailwindui.com/#components
    • keewee7 5y ago
      Tailwind UI looks like a proprietary product by the creators of Tailwind CSS.
      • elliottkember 5y ago
        It's more like a series of templates. You copy them into your project and customize them. I used them for a big project and found them to be absolutely fantastic. It's a lifetime license for unlimited projects - the time I saved was very quickly worth the cost.
      • 1_player 5y ago
        Define proprietary. You pay, they provide full HTML (with Tailwind styles) for all of their controls, that's the point. Worth the money IMO.
    • reducesuffering 5y ago
      All the free components with source code available are here: https://tailwindui.com/preview https://tailwindui.com/preview Rest cost $
  • 5y ago
• gjvc 5y ago
  I want something like this which includes a few ExtJS-like grid (as in data table) and treelist classes for "enterprise" CRUD want-to-be-spreadsheets-when-they-grow-up apps. (point being, everything in a single toolkit) So much of enterprise IT is little more than glorified form fill-in, and yet so few CSS/JS libraries solidly cover these use cases.
• travisd 5y ago
  I wonder what the future of code-splitting with Tailwind will be. With JIT and a large web app, it's easy to ship a massive CSS file even if 90% of the rules are unused on 90% of the pages.
  • deleted 5y ago
    [deleted]
  • adamwathan 5y ago
    Tailwind author here! Do you have an example of a site using the new engine that is shipping a massive CSS file where most of the styles are unused on most pages? The Tailwind website is only 36.9kB of CSS and it likely includes more classes than any other Tailwind site on the internet by virtue of the fact that it has to provide visual demos for so many of the classes. I don't think 36.9kB is massive personally, it's much smaller than the CSS of almost every website I've checked.
    • travisd 5y ago
      No, just a hypothetical concern more than anything. Thanks for the reply!
• Mizza 5y ago
  I've been a Bootstrap user for a long time, but I recently made the jump to Tailwind. It's not the revolutionary upgrade I was hoping for, but it's nice evolutionary step in the right direction. It's quite intuitive, but it doesn't get rid of most of the frustrations that come from doing layouts, as those come from the design of CSS itself. `@apply` makes the upgrade worth it though, it's easy to make custom classes from the Tailwind elements. The one thing I don't like is that the culture around Tailwind seems a lot more proprietary, like you're getting three quarters of a product that you need to buy the rest of, whereas Bootstrap felt like you got everything you could ever need for free.
  • dcre 5y ago
    If you're talking about Tailwind UI[1] — I use Tailwind extensively and have basically never looked at Tailwind UI. It's just useful snippets of HTML styled with Tailwind. It is by no means required to get value out of Tailwind. I'm not sure what you mean by proprietary culture! Based on the fact that I've pretty much never seen anyone talk about it, I would guess (total guess, no real knowledge) that no more than 1% of Tailwind users have paid for Tailwind UI. [1] https://tailwindui.com/ https://tailwindui.com/
    • Mizza 5y ago
      That's what I mean, though. $250 for some styled HTML! I think that's crazy. Compare with Bootstrap, which has basically just as many snippets simply as part of the documentation.
      • dcre 5y ago
        I'm saying you don't need that and almost nobody uses it. There are tons of snippets in the Tailwind documentation. I just scrolled down the side nav and clicked a page at random: https://tailwindcss.com/docs/divide-width#add-borders-between-horizontal-children https://tailwindcss.com/docs/divide-width#add-borders-betwee...
        • dcre 5y ago
• marstall 5y ago
  just got parachuted into a tailwind project. have to say I don't fully get it. the major stumbling block has been how tailwind is mostly just css translated into its own hard-to-memorize lingo. For example, say I want to do something basic like "display:flex; justify-content: start". In tailwind you would type "flex justify-start" instead. Which doesn't really follow any rules as far as how to get from A to B, so it's just a matter of having to look the magic word up in their docs each time until you memorize. And there are a lot of keywords (many modifiable according to n-dimensional properties) to memorize. I know there are handy slugs like "w-1/3" that encapsulate a best practice - but I'm a person who'd rather master the underlying mechanics of that best practice and be able to deploy, tweak and debug it myself.
  • dcre 5y ago
    The difference is you type that lingo inline into the HTML instead of in separate files and you don't have to come up with any class names.
    • animal_spirits 5y ago
      Coming up with variable/class names is one of the most annoying aspects of programming, so any way we can eliminate that task I think is always going to be a productivity boom
      • seph-reed 5y ago
        So strange. Using good variable names is even better than docs in my experience. And having HTML where every div is named helps a ton. It blows my mind how different people's preferences can be on these things.
        • cwaffles 5y ago
          Memorizing and looking up names has significant impact on my productivity, especially on codebases that I do not touch frequently. I often losing my train of thought or momentum because of too much abstraction
• stevebmark 5y ago
  I'm not sure I get Tailwind still. Doing everything with utility classes and OOCSS / BEM are things we stopped doing literally decades ago. CSS modules still seem to solve every problem Tailwind solves, and better. CSS modules combine the power of global utility classes with locally styled components/locally scoped classes, and compile to static stylesheets, a requirement for performance. I'm not sure how Tailwind works, but any CSS that's built at runtime and JS and inserted into the DOM dynamically should be avoided, and is an example of favoring developer experience over end user experience. It's always surprising to me when the build process isn't front and center of any CSS framework, since that's the most important performance aspect. I'm not concerned about Tailwinds verbose CSS use since that's gzipped away, but the static stylesheet compilation aspect worries me if it's not front and center of the framework. CSS modules let you use the full power and control of vanilla CSS, without having to worry about styles bleeding across components. Sprinkle in your global utility classes for your design system and you're good to go. Or sometimes even better, abstract design into components like `<grid>` `<column>` etc and not even worry about the classname implementation. I know I'm missing part of the picture, because of the hype and joy that people report from Tailwind. What part(s) am I missing that move folks from the power, beauty, and simplicity of CSS modules, to all-utility-classes-all-the-time Tailwind?
  • m0ngr31 5y ago
    I'm in the same boat. Started using Vanilla Extract (https://vanilla-extract.style https://vanilla-extract.style) earlier this year and it's the best CSS setup I've ever worked with.
  • aidos 5y ago
    Tailwind is global utility classes too. There’s no runtime aspect. It’s literally just css classes. The nicest thing is that all your variations exist, so you can do things like hover:font-bold. So you can see the rules immediately like with inline styles, but they’re more flexible.
    • stefan_ 5y ago
      At least finally someone using the dirty word "inline styles". It's like all the other comments here stepped right over that point from the grandparent. Only it's not inline styles, it's inline styles and you are Dennis fucking Ritchie in 1970 and your fingers hurt from the teletype so you are making up crude abbreviations for everything.
• brightball 5y ago
  I’m so grateful that Tailwind has removed any analysis paralysis that I’ve had in the past on which CSS framework to invest my time in learning.
• etchalon 5y ago
  I’ve never understood CSS frameworks. CSS is the most lightweight thing I touch in the front end. It’s predictable, there are a billion ways to accomplish things, and it’s super easy to namespace yourself to safety. SASS I understand. It makes writing CSS faster. Tailwind feels like you have to learn CSS, but you’ll never have to actually write CSS. Reminds me of CoffeeScript in that way. You always had to understand both It and JavaScript.
  • marstall 5y ago
    exactly. SASS (and CSS modules) are all I really need. just give me direct access to this amazing language, please!
    • BigJono 5y ago
      I don't even see a need for SASS now that CSS has variables and CSS Modules provides composability.
      • marstall 5y ago
        I do use its inheritance functionality though I have mixed feelings about it. I also like how you can group classes with in each other.
      • etchalon 5y ago
        loops!
  • deergomoo 5y ago
    For Tailwind in particular, it’s easier to understand the benefit if you consider the three main problems it solves: 1. Naming things “semantically” is a giant pain. Sure “user-card” is easy enough, but when you have to start giving names to all the little bits of the user card it quickly becomes absurd. Yeah you can use child selectors and stuff to ease that a little but then you’re basically re-writing your HTML in CSS. Tailwind’s approach is to say “have a UserCard.{html,vue,js} component and move on”. 2. Most codebases have multiple people working on them, and those people are often not CSS experts. It is very common to end up with giant stylesheets that only grow with time, because people are too scared to ever remove or change things in case it breaks something seemingly unrelated. Utility frameworks (and other modern approaches like styled components) keep the styles directly attached to the HTML being styled. You can make any change you like, safe in the knowledge that you are only affecting the thing in front of you. 3. It pushes you into a design system. Sure this is achievable through Sass/CSS variables, but for Tailwind it’s right there with a sensible default out of the box, and easily configured if you need something different. I think the important thing is, Tailwind doesn’t enable you to do anything you can’t do by writing well structured CSS, because ultimately it is just CSS. However, people aren’t perfect, and I believe that Tailwind does a genuinely good job of helping people avoid common footguns. If your team is largely composed of CSS wizards who are fine to carry on as normal, that’s great, you probably won’t get much out of Tailwind. But for a lot of us, the price of remembering some (very consistent, to be fair) shorthand class names is well worth not wasting hours battling the cascade and suchlike.
• jerrygoyal 5y ago
  TIL about css columns (a replacement of flex if you're not building responsive design) https://developer.mozilla.org/en-US/docs/Web/CSS/columns https://developer.mozilla.org/en-US/docs/Web/CSS/columns
  • dorianmariefr 5y ago
    You can have responsive columns, e.g. columns-sm
  • marstall 5y ago
    got excited for a sec - very cool! then tried on Safari (v14) - no love.
• dorianmariefr 5y ago
  And the usual release video: What's new in Tailwind CSS v3.0? https://www.youtube.com/watch?v=mSC6GwizOag https://www.youtube.com/watch?v=mSC6GwizOag
• Ataraxy 5y ago
  The waterfall columns layout is really nice.
• cuddlecake 5y ago
  > Modern aspect ratio API — no more padding hacks, well unless you need to support Safari 14, which you probably do, but still. This is what makes me cry at night.
• jlelse 5y ago
  Is it possible to use the JIT feature with Golang template files?
  • francislavoie 5y ago
    Yes, just make sure the `content` config will read your files: https://tailwindcss.com/docs/configuration https://tailwindcss.com/docs/configuration
    • jlelse 5y ago
      Which template languages are supported? I wasn't able to find any information about that.
      • francislavoie 5y ago
        It's just regexes basically. All languages should be supported. If something that looks like a tailwind class is found, it'll add it to the list of ones it'll generate.
• burlesona 5y ago
  I'm ambivalent about Tailwind, but I've used it a lot. I will say the hypothetical advantages are mostly the following: 1. It's a step function over CSS units. This is the biggest strength, just standardizing that your design uses padding of 2, 4, 8px, but not 1px, 3px, or 1.23123em :). It provides more steps than you need, but still it's good that the core of Tailwind is a design system with defined unit and color variables. 2. Some of the utility classes are very helpful. Even as someone who likes writing CSS, it's nice to not need to give something a custom classname just because I want to put margin-top on it. class="mt-4", done. I think the problem is Tailwind goes too far and tries to replace EVERYTHING with a stack of utility classes. This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore. Personally I think the best parts of Tailwind are captured in Pollen[1], but I do wish it came with a subset of utility classes for colors, font sizes, margin, padding, and text alignment. I think the hard part is defining which subset is the right subset... I doubt you could find strong agreement from a large majority of developers on that. 1. https://www.pollen.style https://www.pollen.style
  • JasonCannon 5y ago
    >This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore. That app is done wrong. If you are using the same styles to represent a button you should use postcss and do .myButtonClass { @extend: (80 tailwind classes here) }
    • markdown 5y ago
      So now we have to add this new postcss thing. Modern web dev is bandaids all the way down.
• d--b 5y ago
  Geez, every time I see stuff from Tailwind I get so jealous… Tailwind is fine, but how they pulled off making tons of people pay for a css framework just blows my mind. I remember reading the “UI for developers” articles, and saw how they built up the hype. This was so well done…
  • hbn 5y ago
    You don't pay for the framework though? If you're thinking of TailwindUI, that's a separate product that's just a bunch of premade components built with Tailwind. You don't have to pay anything if you're just using Tailwind to write CSS, which is all I want it for.
• _vufv 5y ago
  With no disrespect to anyone, I think it'd be useful if people bashing Tailwind would briefly list what their day to day programming consists of. My impression is that most of the negative comments are coming from people that don't code for Web often (I could be wrong). To those folks: I'm not saying you don't know your stuff or that you argue badly - since I was on that side myself a few months back. What I am saying is that the elegance and pragmatism of Tailwind might not be easy to intuit just by reading about it. Try to implement a simple landing page using Tailwind+TailwindUI and see if any lightbulbs gets lit.
  • neurotrace 5y ago
    I've been a web dev for about 10 years. My day to day now involves building out React-based applications dealing with both the backend and frontend. I put in the work and built a real side project using Tailwind and it was so annoying. When you write anything substantial you end up with class name soup. The answer to this is to use `@apply` which is literally just a normal CSS class with extra steps. The new vernacular just means that users have to learn Tailwind language rather than proper CSS. CSS modules solve the main problems that Tailwind attempts to solve. The other things are solved with use of CSS variables. The only thing that I find useful in Tailwind is the responsive design classes. Being able to do `md:<some other style here>` is pretty cool. To me, Tailwind seems valuable to newer engineers because they feel like they don't have to learn CSS. They learn "Tailwind." It's like all those people who would say "I don't know JavaScript, I know jQuery." Like jQuery, there are benefits in having a unified language especially when you're newer. I believe that a better solution to styling is inevitable (my latest favorite heavily uses CSS variables). I do not believe Tailwind is the best way forward.
  • azangru 5y ago
    Sure. Frontend development, mostly on a single React-based project, for which we receive mockups from a dedicated designer. Using CSS modules, with SCSS (not sure we even needed the SCSS; we do sometimes use its nesting and ampersands; but I think we could have just as well written vanilla CSS syntax). Other times, I would write web components with lit. With shadow dom, web components would have their own little bits of CSS, which provides sufficient amount of encapsulation that neither CSS modules nor SCSS are really necessary. I don't have any problems with importing CSS from (S)CSS files or writing it inside of a LitElement-based web component. I don't have any problem with writing CSS by hand either. I find it strange that people would want to learn another domain-specific language for CSS, in addition to the CSS itself and DOM's camel-cased style dialect.
• hsbauauvhabzb 5y ago
  I like the idea of tailwind, I’ve dealt with raw css and bootstrap before but I’m certainly no frontend developer. How can I learn tailwind enough to become proficient? Most of the documentation I looked at seemed to lack any tutorial on how to locate the correct classes I need, or any other sharp edges that might exist,
  • Kaze404 5y ago
    My process of learning Tailwind involved nothing but going to https://tailwindcss.com/docs https://tailwindcss.com/docs, pressing Ctrl+K to bring up the search, and typing the class I'd use in "regular" CSS. Their search is great at picking these up.
    • JasonCannon 5y ago
      Agreed. My team is doing this very process. If we run into not knowing what class to use, we just look it up on the docs. VSCode also has a great intellisense plugin for tailwind as well (https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss https://marketplace.visualstudio.com/items?itemName=bradlc.v...). For the first day or two we used the docs pretty heavily. Now, we just make a best guess, intellisense generally tells us what the class name actually is, and if we can't figure it out then we go to the docs.
• alberth 5y ago
  I inherently from a coworker who was terminated, a web app built with Tailwind. The tailwind.config.js is missing. I can’t even begin to describe all of the reverse engineering I’ve tried to regenerate the config file with no luck and we’re royally screwed. Make sure you don’t lose that file!
  • deleted 5y ago
    [deleted]
  • Yabood 5y ago
    Unless your coworker configured some plugins or extended some classes, a vanilla tailwind config with JIT-enabled should be all you need.
    • alberth 5y ago
      We have a customized theme (colors, fonts, etc), hence the issue.
• Yabood 5y ago
  We've been using Tailwind for over a year now. We use it with Angular for our web application and with Gatsbyjs/React for our production website. I have nothing but love for Tailwind.
• bamboozled 5y ago
  Coming from someone who mostly does platform / service work and usually avoids "the frontend", tailwind helped me to actually understand CSS, it made sense to me and has saved me a lot of time. The site I built looked professional very quickly and without much effort. Thank you to the team and I look forward to using it more in the future.
• rasulkireev 5y ago
  Obviously this is not a solution for everyone, but tailwindui solves all my problems. From that point all the updates are suuuuper quick to make.
• ggregoire 5y ago
  As always when anything about Tailwind gets posted on HN… 200 comments so far and (almost) not a single one about the actual blog post. Looking at the new features, I wondered why they went with a major version bump, but seems like it's because the Just-in-Time engine released in Mars as a feature flag is now the default engine, which is a pretty big change by itself.
  • 946789987649 5y ago
    I don't think this is a tailwind specific thing. I see this happen with almost every framework/language update. There's more people who know about a language than people who know the language. So it will obviously deviate more to them.
• nfRfqX5n 5y ago
  congrats to the team, they’ve been moving at a solid pace while keeping the quality high. funny that this also continues to be one of the most controversial topics on HN
• joshlemer 5y ago
  I took a stab at using Tailwind a while back but I'm embarrassed to admit it didn't make much sense to me as someone with only the most basic CSS skills. And for some reason CSS to me has been something really hard to get any kind of foothold in and I've always ended up just resorting to big UI component libraries like Bootstrap. Any recommendations on skilling up in CSS for your average back end dev? Manning's "CSS In Depth" maybe https://www.manning.com/books/css-in-depth https://www.manning.com/books/css-in-depth
• Accacin 5y ago
  I tried Tailwind not long ago and really liked it, but setting it up with Create React App seemed a bit of a hassle as I couldn't do it without replacing the build, run, and watch scripts with something else I'd forgot the name of.
• commanderkeen08 5y ago
  Every time Tailwind does something great and gets posted here, the conversation devolves into the same arguments: “I don’t get it. It’s just inline styles.” What is it about CSS that gets people so offended and opinionated? If it were a new JS framework, few people would be saying “I just don’t get XYZ. Use React”. Is it because Tailwind is so drastically different and breaks people’s core ideas about separation of concerns? Maybe it’s because we all learned CSS very early and were told to do it XYZ and now challenging that is painful. If you honestly want to “get” Tailwind, go use it in a project. If you don’t like it, don’t use it. Nobody is going to change your mind in a comment and you’ll never convince anyone to stop using it. Idk. CSS is what I least care about. It’s a thing. I use it to do a thing. And I move on. I used SASS. Now I don’t.
  • johnfn 5y ago
    Yeah, it flies in the face of conventional wisdom and I think that bothers a lot of people. It’d be like if a new JS library came out that said you should make every variable a global. And just for the record I like Tailwind :)
  • deleted 5y ago
    [deleted]
  • jastr 5y ago
    When you first hear Tailwind's concepts, they seem to contradict everything you know about good software design. When you try it out and begin to remember some of the class names, you get into a great state of flow - it's the high developers are always chasing. I can't help but feel that Tailwind detractors have never actually tried Tailwind or are too square to give it a chance.
    • alphabet9000 5y ago
      regarding 'contraditing everything you know about good design' i feel this way about designing webpages using <table> elements. the constraint really forces you to be creative with using image elements to make everything fit on the page just right. styling with tables used to be popular, but then it went out of fashion, unfortunately. i'd like to see it make a comeback. i'm not being sarcastic either.
• danbruder 5y ago
  we love to see it
• chrysoprace 5y ago
  I've always been a bit apprehensive of Tailwind but with the latest JIT compiler it actually seems usable. I'm happy to see it getting more use for mainstream applications but I wish it wasn't the "default" for a lot of open source projects. For example, several of the next.js examples[1] use tailwind without explicitly stating so, because I guess it's just become a ubiquitous as css stylesheets or modules for some people. The problem I find is that it adds opinion and mental overhead for people learning related technologies or trying to get a head start without an opinionated styling solution. In order to use something like the blog-starter example for next.js I have to go and learn tailwind and then come back before I can use their blog starter, where as CSS is universal. CSS works with every project, without depending on Tailwind. Anyway, looking forward to seeing newer improvements to Tailwind, but I hope that people will consider it an alternative to something like Bootstrap instead of an alternative to CSS. [1] https://github.com/vercel/next.js/tree/canary/examples/blog-starter https://github.com/vercel/next.js/tree/canary/examples/blog-...
  • dstroot 5y ago
    > For example, several of the next.js examples[1] use tailwind without explicitly stating so, because I guess it's just become a ubiquitous as css stylesheets or modules for some people I used Bootstrap for years and give MDO major props. I learned Tailwindcss actually because it was starting to show up everywhere and many of the Next.js examples were using it. Now that I have used it I would say it changes how you think about css and styling - it gives you more power and more guardrails and it also then ships a smaller css load to the client. It was always a struggle to carve away the parts of Bootstrap you weren't using.
    • chrysoprace 5y ago
      I'm sure it's very nice to use (I've been learning it in the past week), and I think it's a great alternative to Bootstrap. Personally, I'm not fully sold on it as a 100% alternative to styling with css (not least because you can't do pseudo element styling and have to add another node to the DOM). As someone who knows CSS, when I look at a template which uses tailwind I get overwhelmed because I have to mentally process what the 20 classes per node do in combination, where as I can look at a CSS module and (usually) instantly understand what's going on. Sure, once you've done a few tutorials and installed the VSCode extension you'll be able to find out what they do, but the code becomes almost unreadable for people not familiar with Tailwind.
• arjunbajaj 5y ago
  If you want to jump into learning and using Tailwind quickly, I highly recommend their official playlist: https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0 https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOL... It helped me a lot!
• nickjj 5y ago
  If anyone is interested I just updated a bunch of my example Docker apps to use TailwindCSS v3. That includes examples for Flask, Django, Phoenix, Rails, Node and Play. Here's a link to the repos: https://github.com/nickjj?tab=repositories&q=docker-*-example https://github.com/nickjj?tab=repositories&q=docker-*-exampl... It took longer to rebuild the Docker images than making the v2 to v3 Tailwind specific changes. In my case it came down to deleting and renaming a single property in my Tailwind config file.
• ahallock 5y ago
  I've been working with CSS for over twenty years, and Tailwind is the way forward for me. Some of the big benefits are: * No more worrying about naming class selectors. This frees up so much cognitive space. The less you have to worry about naming the better. I used the SUIT CSS naming convention before, which allows a mix, and that just creates friction. You need the same level of abstraction all the way through. * No more flipping between files. You edit your styles directly in the HTML. You will need to consult the TW docs, of course, but they're easy to navigate. * Tailwind is more than just inline styles. It provides a nice syntax for targeting breakpoints and little utilities for conveying more abstract styles/stacking rules. * TailwindUI is a great way to jumpstart a project and looks way better (IMO) than Bootstrap's components. * JIT is awesome I'd be remiss if I didn't mention some cons: * Looking at a bunch of class names in your HTML is at overwhelming at first. It's hard to delineate the structure. Using proper HTML elements, roles, etc. helps. * You will need to DRY up your repetitive styles by moving things to templates/components. So you still have to name things, but just keep it generic (alert, dropdown, badge, etc) * Sometimes you'll have to create class selectors when working with web frameworks and JS libs that require a single class selector option.
  • jbergens 5y ago
    I can just add that WindiCss is worth testing. In my small trials it worked a lot better than Tailwind with jit. Windi with Vite gives me a really fast dev experience. We'll see if UnoCss takes over.
    • osener 5y ago
      I am currently using Tailwind JIT and so far it has worked well. What does WindiCss or UnoCss offer over it in your experience?
• yasserkaddour 5y ago
  I love Tailwind! It elegantly solves most pain points in writing CSS. However, it does this at the cost of readability, and you can easily end up with HTML that looks like this: <div class="w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded md:w-32 md:h-32 md:rounded-md md:text-base lg:w-48 lg:h-48 lg:rounded-lg lg:text-lg focus:bg-red-400 focus:rounded-md hover:bg-yellow-200 hover:rounded-t-md md:focus:rounded-xl md:focus:text-lg lg:focus:rounded-xl lg:focus:text-xl md:hover:rounded-xl lg:hover:rounded-xl">Yikes!</div> I would love to have a transpiler that produces the line above from a code like this: <div class="w-16 h-16 px-2 py-1 m-1 text-sm text-white bg-black rounded" md="w-32 h-32 rounded-md text-base hover:rounded-xl" md-focus="rounded-xl text-lg" lg="w-48 h-48 rounded-lg text-lg hover:rounded-xl" lg-focus="rounded-xl text-xl" focus="bg-red-400 rounded-md" hover="bg-yellow-200 rounded-t-md">Yeah!</div>
  • hbbio 5y ago
    https://windicss.org/ https://windicss.org/ does it It also seems that the major speed improvement in Tailwind is inspired by windi
    • yasserkaddour 5y ago
      I looked into windicss before and didn't see the attributify mode https://windicss.org/features/attributify.html https://windicss.org/features/attributify.html It's exactly what I was looking for, Thanks!
      • pdxandi 5y ago
        Oh wow, that's pretty handy. I hadn't seen that before, either.
  • cush 5y ago
    Even spread out in attributes it’s hard to read
    • happytiger 5y ago
• drusepth 5y ago
  I finally got into Tailwind a few months ago after originally HATING the paradigm shift, but it's started to grow on me -- especially since most of the modern "material design" CSS libraries are starting to show their age and Tailwind fills a similar throw-together-something-beautiful-fast niche. This comes at particularly nice timing with Rails 7 releasing at the end of the month. I can't wait to pair the two and see how well the new features of each work together.
• ablekh 5y ago
  If you would decide or have to use Vue for a complex project today, would you use Tailwind with Vue? If yes, why? If no, why not? Would your answer and rationale change in cases, when you decide or have to use a Web application framework like Nuxt or a UI component library like Vuetify and PrimeVue?
• hiimshort 5y ago
  I tried Tailwind (and a similar project Windi) on a few projects now and have some findings. Tailwind aggressively speeds up development time of components by allowing me to stay in the same cobtext when styling things. The brevity of class names also dramatically shortens the time spent writing styles. While working on the projects I'd setup with Tailwind, I felt far more productive. However, those were new projects. After completing them and needing to go back and modify or maintain them, the experience has been horrible. The resulting style declarations (as class names) are completely unreadable and unmaintainable. I've tried organizing them and splitting class names onto multiple lines, but it has only cluttered things. In my experience, Tailwind (and similar projects) produce styles that are effectively read only. They are superb when writing a new component and styling things from scratch, but maintenance is nonexistent. Because of this, I've now switched to using a CSS-in-JS solution to gain the benefits of in-context styling and still have the ability to write CSS declarations in a structured and maintainable way.
  • proxyon 5y ago
    we use tailwind along with a component system. works great.
  • kumarvvr 5y ago
    Tailwind works wonders in a component based system, but component styling ought to be very fine grained to ensure maintainability. I have created React components with TW, where the components are complex and large. However, breaking them down into tiny functional blocks, maintenance is easier.
  • docmars 5y ago
    Why not use both? twin.macro is an excellent library that compiles Tailwind (and adds additional, useful variants) in systems like Styled Components and Emotion, so you gain the benefits of quick component creation, but the same pleasant maintenance of colocating utilities and styles/classes/objects composed of these utilities with your components. It's been an absolute dream in a decent-sized project so far, and even with some refactors. Regardless, it's not everyone's cup of tea, but depending on the UI framework of choice and the flavor of CSS you use, YMMV when it comes to dev experience. In Vue or Svelte, I wouldn't even use a CSS-in-JS solution because vanilla Tailwind to compose utilities into localized classes is a straightforward approach.
• mcgingras 5y ago
  I don't have the energy to explain to the naysayers why I love tailwind so much but I do have the energy to log back into HN just to comment that I absolutely love tailwind. Give it a try and maybe it'll stick!
• kumarvvr 5y ago
  By far Tailwind has been the fastest way for me to prototype UI. I am a developer nerd and have a good taste for design. However, during actual development, I do not have the ability to visualize what I want in the first attempt. So, I have to tweak the look and bring out the beauty I want through a 1000 cuts. TW makes that process extremely easy. Like, mindbogglingly easy. However, I have learnt to be careful with my code, and I often limit the styles by splitting them off into sub-components.
• trungdq88 5y ago
  Last time I tried the jit or purge mode, some classes were missing randomly each build and broke my site. (I followed their purge rules very carefully). The worst thing is it ONLY happens on the production build. I like Tailwind CSS and I really hope they make it stable.
  • lukeholder 5y ago
    This is FUD, it is being used very widely. I'm sure it has bugs but what doesn't.
• droptablemain 5y ago
  Any general advice for incorporating Tailwind into a massive legacy project with awful CSS architecture?
  • marc_io 5y ago
    This: https://youtu.be/oG6XPy1t1KA https://youtu.be/oG6XPy1t1KA And/or this: https://youtu.be/cZc4Jn5nK3k https://youtu.be/cZc4Jn5nK3k
• peterkelly 5y ago
  I've never used Tailwind CSS. I watched the video "Just-In-Time: The Next Generation of Tailwind CSS" and all of it seems like they're solving problems that are entirely of their own creation, and doing so in an impressively complex way. The use case demonstrated was suppose you have a twitter button on your site, and it has to have a background color of #1da1f2 because that is Twitter's brand color. Instead of writing style="background-color: #1da1f2" like a normal person they have a class name called bg-[#1da1f2], and their "JIT compiler" generates a named class with that property. In another part of the video, they use className="font-bold" instead of style="font-weight: bold". Apparently the advancement in this version is that instead of having all of those pre-defined classes they only generate the ones you actually use. The feature list for 3.0 includes the ability to use any color you want, and even arbitrary CSS properties that the framework doesn't explicitly know about. Is this progress? I could use the style attribute in 1999.
  • luisrudge 5y ago
    Alright. Now add a media query to change the button size based on the device size. Or maybe use a different color on hover. You can’t do that with inline styles.
    • jacquesm 5y ago
      You shouldn't need to do any of this in the first place if you followed the original recommendations for the WWW.
      • papertokyo 5y ago
        Use cases and expectations have changed somewhat in the last few decades.
  • mping 5y ago
    You miss the point. Using the style attribute everywhere causes duplication; using css classes can quickly lead to bloat where you have lots of unused classes. This is a way of paying only for what you actually use.
• yewenjie 5y ago
  Seems surprising that no one has mentioned UnoCSS - the big umbrella of atomic CSS frameworks yet. https://github.com/antfu/unocss https://github.com/antfu/unocss
• mythz 5y ago
  Tailwind has to have the gold standard of library docs - impeccably well thought out with the fastest & relevant quick search UX. The invaluable utility of which ultimately convinced us to implement real-time search into our docs as well.
• tomcooks 5y ago
  Why have very spurious html, intertwined with the presentation layer? Are you going to update all your HTML in a year when a fresh new hip library lands on your HN homepage?
• bschne 5y ago
  For those wondering "but separation of concerns!" or "but code reuse!", the dev behind Tailwind wrote a post about his thinking around this, which IMO makes quite a lot of sense, a while back: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
  • 734129837261 5y ago
    The problems he's tackling weren't problems, and his solutions are a bombardment of utility class names in your HTML, rendering it extremely and unnecessarily verbose. It makes the HTML less intuitive to read, too. A `<div class="user_profile">` is clearly a container for a user profile, a `<div class="here comes a shitload of tailwind class names because inline styles are now apparently cool again">` tells you absolutely nothing about what the hell is going on. I fucking LOVE CSS and Tailwind is an insult to the craft. Those who love Tailwind tend to not understand CSS beyond the basics, is what I've learned. Those who hate Tailwind know CSS inside and out. To each their own, but this example from their own homepage makes me want to vomit: <button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-gray-300 border border-gray-200" type="button" aria-label="Like"> Like what the actual flying fuck. This is inline CSS, period. And that's wrong, always. Tailwind makes me mad and angry because I love front-end development, I love CSS, and everything about this feels like a mentally challenged person spitting me in my face. Nothing I can do about it, they are challenged after all, but damnit it's annoying.
    • hbn 5y ago
      > A `<div class="user_profile">` is clearly a container for a user profile, a `<div class="here comes a shitload of tailwind class names because inline styles are now apparently cool again">` tells you absolutely nothing about what the hell is going on. You know what's going on if you're in a component called user-profile.component.html How often are you writing something like a user profile component in the context of something much larger? Also, what styles would the class "user_profile" even have? You say the second one "tells you nothing about what's going on," but I'd say it's the opposite. If you actually put real tailwind classes in the second one, I'd know exactly how that div is styled whereas the first one requires cross-referencing another file. "user_profile" probably has CSS implementation that have almost nothing to do with a user profile. It's probably a container that has maybe a margin, a max-width? The important styling details all come from the inner HTML and stylings on those things. So your "user_profile" class is mostly just another generic wrapper that you had to come up with a name for.
• edwnj 5y ago
  lol Its funny how this thread just turned into a review of tailwind. IMO Tailwind is awesome (and cant wait to try out v3). It took me a second to warm up to it but now it makes so much sense. You deal with a lot of minutia writing your own classes and since css is designed to be put in classes, it looks ugly when you add it to elements. Minifying the styles into structured classes makes life so much easier. Once you map out like 5% of the lingo, you can instantly play with it like lego blocks. I literally get the same feeling I had when I was first messing around with frontend. That feeling of power/possibilities/excitement when you can tweak a few words and shit changes on the screen.
• T3RMINATED 5y ago
  https://dev.to/brianboyko/tailwindcss-adds-complexity-does-nothing-3hpn https://dev.to/brianboyko/tailwindcss-adds-complexity-does-n... If you work in the front-end, you've probably heard a lot about TailwindCSS, a CSS library, much like Bootstrap. Much unlike Bootstrap, however, Tailwind takes a different approach - it is all "utility classes". And I am not a fan. I got a whiff of it and quickly learned the name is appropos: it was as welcome and useful as passed gas.
• AltruisticGapHN 5y ago
  I love Tailwind but now with these updates I'm like "ok whatever". Information overload. There is a point where there are so many utilities; it's just not reasonable to ask me to remember them... and at that point where I can't keep them in my mind, then the "framework" loses some of its appeal and benefits. Of course I suppose it's up to the user to decide what they want to remember, and it is the nature of the framework to become exhaustive. I don't really have an answer to this. Only that it further reinforces how TW is a tool, among others, and as it becomes more and more complex it can no longer become a "holy grail" sort of approach precisely because you lose the benefits of having "rails".
  • hbn 5y ago
    I have a subset of my more commonly-used classes memorized, and for everything else it has a fantastic docs site that I keep a tab of while working, which also got overhauled with v3.0 https://tailwindcss.com/docs https://tailwindcss.com/docs Cmd+K to search (it's also a pretty damn good, exhaustive search too)
• aej 5y ago
  Tailwind feels like the correct abstraction on-top-of css which works for 90% of use-cases. I struggled with css for many years but Tailwind has actually helped me improve my css - when I'm forced to write plain old css, my mental model of how everything works is much better. The fact that Tailwind has become so popular is a smell that css is slightly too low-level for most developers.
• laacz 5y ago
  I am the one who always has had issues with TailwindCSS. But now I know why. It's not because it's polluting HTML. It's because I am not one of those, who can whip up some cute buttons on the fly. I have no idea how to apply padding, chose fonts, colors or combine shadows. I'm better off with CSS frameworks which provide me with these things out of the box. TailwindCSS ir just a method for rapid designing, which I am totally incapable of.
• aruanavekar 5y ago
  https://www.youtube.com/watch?v=gg43E_AOQko https://www.youtube.com/watch?v=gg43E_AOQko
• nauticacom 5y ago
  I find it funny whenever Tailwind people tout that you "don't have to name things." You still have to name your JS-framework-of-choice components, and you still have names for each of the parts of a single component that get smattered with class names; it's just that the name is implicit in your head now instead of explicit in the CSS
• iovrthoughtthis 5y ago
  you know its good when so many people hate it