4 ms·

Tailwind is the greatest thing to ever happen to CSS in my entire history of using it (for me, personally). It's like being free from 1000's of levels of munda

• swyx 3y ago
  yeah. "web craftsmanship" here seems code for "code style the way i like is Good, everything else, including beginners and hackers just trying to ship fast, is Bad". in other words, gatekeeping.
• DanHulton 3y ago
  I think you hit the nail on the head with the "higher level language" comment. There's still value to being able to write at lower levels of language. Always has been, always will be. But having the higher-level languages lets you move a lot more rapidly, so long as the abstractions it makes for speed align with your goals. For a lot of people, Tailwind's abstractions very much align.
• vehemenz 3y ago
  I second everything here and wish more people would actually work on complex projects with multiple maintainers before they rush to judge Tailwind based on arbitrary norms from the Netscape-era web.
• PrimeMcFly 3y ago
  Tailwind doesn't seem like a good fit for me (although Tachyons looks interesting!). I don't think it's inferior or superior, just a better approach for certain people. Personally I've found Bulma to work well in conjunction with Django.
  • kibibu 3y ago
    IMO Tailwind only really makes sense if you're using a component-based framework. Trying to adopt it in a vanilla Django app (with monolithic templates) will lead to lots of duplication.
    • PrimeMcFly 3y ago
      Can you expand on why that would be?
      • Exuma 3y ago
        Not who you replied to, but it's basically how tailwind works. The magic of tailwind comes from a few things: EVERY property must be explicitly specified. There is no "cascading" (inheritance). At first glance, this might seem like a horrible idea, but it has a TREMENDOUS upside in that everything is explicitly defined in the clearest possible way. (the style is directly ON that exact element. if you have a div inside another div, that inner div will not inherit font, colors, etc. You must define it all again). The benefit of this is that everything can be "componentized" or split apart, and reordered, and moved around, and nothing will "break" stylistically. Your styles literally are perfectly attached to the structure. This is because EVERY single element is decoupled from EVERY other element, stylistically. This is truly the 100% stark opposite of traditional CSS. A good example of this... is the very first time I googled a tailwind component, for some dropdown or something, I pasted the HTML + CSS classes directly into my project in some arbitrary spot, refreshed, and it looked PERFECT. I was literally floored and stunned! If you have programmed wordpress or other sites back in the day, and you know the true nightmare of trying to put some arbitrary bit of css or some script into your own projects and the styles are all conflicting, thats what I'm talking about. You know that pain. Even my BEST projects back in the day where I SWEAR to myself "im going to make THIS project the perfect CSS structure", ... after about a month i would be once again caught in these complex awful webs of conflicting and overwriting classes, despite my very best efforts. Now there are downsides to this as well, but they're mitigated by using a component framework: First, Because everything must be explicitly defined in EVERY place, this obviously creates a lot of duplication. After all, this is the entire point of CSS classes. Lets say you have a shopping cart item in one area of the app, the main listing, and then you want to show it again in your shopping cart. Youd have to define those style classes twice using tailwind if youre using a standard app which has "layout files" and "views". Now a component based framework though means you can make a component called <ProductItem /> and define the classes ONCE in that component. In this sense, a component almost becomes a much more advanced replacement for a CSS class (in a sort of weird and twisted way). Lets take it further, and say WITHIN the product item is some text that looks like this: "Reviews (5) [NEW]!" And its styled a certain way. Now lets say that same style text appears below a different type of "review" and not a product item. In this sense, you can't use <ProductItem />, but you could make a new component called <ItemMetaInfo /> and then write your class in there (once), and extract that out to a component. There is a sweet spot to extracting out components vs a slight amount of duplication (say...5%). This also aligns VERY nicely with the entire purpose of component based frameworks is that the complex logic lives within the component... so lets say your <ItemMetaInfo /> grows in complexity over time, maybe it shows literal star SVGs, or supports multiple A | B | C sections based on an input parameter. That complexity can live in that new component along with the tailwind classes, defined once. The second downside is its a LOT of typing, and this is where tailwind really excels to me. The properties you type are a god send, and SO much faster, easier to remember, and everything. This is coming from a vim freak who has memorized and written thousands of hotkeys and macros over nearly 15 years for CSS, and 100's of projects over the years. With tailwind, you do NOT need editor completion or anything like that. Its SO fast that it feels "effortless" in terms of the "ugh" resistance from writing CSS. The best example of tailwind is right on their homepage: https://tailwindcss.com/ https://tailwindcss.com/ Scroll down about 100px and watch the realtime demo of them adding css classes and watch the design change on the left. It really IS THAT FAST to write tailwind classes and design THAT quickly, including responsiveness, and everything. This is 1000% not the same as css even with the very best macro/autocomplete setup.
• toddmorey 3y ago
  Hear me out because I thought I HATED tailwind, but have come to reconsider. What got me to convert to using Tailwind on projects (after a lot of reluctance) was styling variants. How to handle edge cases in your CSS empire. For modern CSS practices, he gives a good example in the article of creating a button component with scoped styles. At first, that seems to work really well. But now use that button in unique and unforeseen location where it really needs left margin. There are SO MANY little scenarios like that which will creep up in actual usage. You could target the button via id or perhaps a class on the parent, but making adjustments that way is not really fun, maintainable, or repeatable. So then the next step is creating a few utility classes so you can easily apply a bit of margin, padding, etc. But now you have to decide what stays in the .button class and what properties to make flexible via added utilities. Pounding your head on the table brings you to the same conclusion Adam (the Tailwind creator) reached: it sounds crazy, but may I could only use utility classes... Tailwind is certainly verbose. But it's very readable, explicit, and easy to debug. Wait... why is this button blue? Ah, I see right here in context... because it has bg-blue-600 applied. The cascade is powerful but also tricky... it can be hard to determine where and when across global and local style that a piece of html picked up a certain color, size, or property.