30 ms·

TailwindCSS v2.0

• bkeating 6y ago
  Tailwind and utility-first in general is a major win in my book if for one thing only; I don’t have to think about naming my elements at the html level at the start. Huge speed increase that gives me immediate results. You can absolutely spot and define those names, but you don’t have to think of them up front, allowing you to move forward more abstractly. Readability and maintainability seem like an inefficient nightmare but so far I have felt no pain or burden. Hats off to the Tailwind team. This is the way.
• aarondf 6y ago
  Geeze, this homepage is truly world-class. Props to the Tailwind team!
  • markdown 6y ago
    What homepage? This website makes one of those noob mistakes that many off-domain blogs do, in that their logo doesn't link to tailwindui.com. I wonder why they used a blog off-domain in the first place. blog.foo.com is so 2005. foo.com/blog makes more sense.
    • aarondf 6y ago
      Come on, surely you know I'm talking about https://tailwindcss.com https://tailwindcss.com.
      • markdown 6y ago
        Now that you've confirmed it, yes. They have two websites and two home pages: foo.com and blog.foo.com
• whalesalad 6y ago
  I've been writing CSS since the beginning of the web2.0 days and so it was really hard for me to adjust to the Tailwind approach. It's by no means perfect, but after working almost exclusively with it (and Tailwind UI) I am a big believer. I find myself wanting all the utilities almost immediately as soon as I am back on any other project/codebase.
  • christophilus 6y ago
    Yep. Can confirm. It took a while, but I'm sold. Also, the VS Code tooling is excellent.
• Wolfr_ 6y ago
  Their marketing is good, they do a primo job at conveying the message in a nice looking way, but the end result is still HTML littered with hundreds classes, that gets hard to maintain and impossible to refactor.
  • kevmo314 6y ago
    I'm a big fan of Tailwind because I've realized that HTML isn't really maintained and refactored anyways: it's either composed or rewritten. Rarely do refactors happen in the same way as most programming languages.
    • Wolfr_ 6y ago
      Depends on the kind of work, for me, in the kind of long-running web software I make HTML is actually maintained or refactored.
      • CGamesPlay 6y ago
        For this use case, the "tailwind solution" is to use components, either Angular, React, or whatever, but to pull those "hundreds of classes" into reusable chunks that could be refactored.
        • deleted 6y ago
          [deleted]
  • Bishonen88 6y ago
    I found the promotional video for v2.0 somewhat silly. Epic music taken almost from some Nolan trailer playing in the background for things like "New color palette", "New shades of Gray". Edit: here's a stark contrast of another promotional video for some tool doing a better job (IMO): https://www.youtube.com/channel/UCaNsjhUdh3BxFL6tzyuhc9g https://www.youtube.com/channel/UCaNsjhUdh3BxFL6tzyuhc9g
    • jherdman 6y ago
• systemvoltage 6y ago
  I've gone through the following phases: 1. Write old school circa 2008 CSS. 2. Oh shit, it's a real pain in the ass to do layout and make a responsive grid. Let me use a framework. Sweet! 3. Hmm.. its kinda painful to write css selectors all day long. They're reusable but I am having to get out of comfy JS IDE setup to go change some CSS properties in a different file. 4. Tailwind arrives. OMG. This is awesome! Never have to leave the context. Just stack properties as you like and compose your components! 5. HTML looks completely unreadable. It's a goddamn mess. 6. I want to go back to 2005. No frameworks. Just write non-responsive CSS, one for each screen (yeah, you read that right. I don't want to compromise the layout for responsiveness. I'd rather handcraft one for each device size give or take a few pixels). Custom crafted like a piece of fine art. CSS grid/layout is a lot better with css grid and flexbox. Things have improves since the 960-grid days. No frameworks at all and its fucking liberating. Edit: I currently use reset/reboot css to clean up default rendering + sass (only use variables + mixins). I am happy like a daisy.
  • fevangelou 6y ago
    Amen, brother!
  • dubcanada 6y ago
    What benefit does having completely readable HTML offer?
    • chrisan 6y ago
      The same benefit as any language you program in. Readability (not saying tailwind is hard, but it can be messy) is one of the most important things I look for.
      • dawnerd 6y ago
        If you use prettier or similar readability isn't an issue. I'd argue readability is improved since you can tell right away how an element is going to be displayed vs having to open up the css and look there.
• CapriciousCptl 6y ago
  > Incompatibility with IE11, so you can tell the man upstairs "sorry boss it's out of my hands, blame Tailwind" For those who don't know, IE11 is the last major release of IE. Between a major frontend framework feeling confident dropping IE, and Apple dropping Intel it kind of feels like the end of an era.
  • WillPostForFood 6y ago
    Yes, released on October 17, 2013.
  • Ralfp 6y ago
    I have a Windows 7 machine around that used to run IE 11, but one day it silently updated that to "Edgium", which is great.
• zerubeus 6y ago
  This project is really amazing, so much love
• EasyTiger_ 6y ago
  IE 11 is no longer supported :(
  • rement 6y ago
    IE 11 is no longer supported :)
  • Ralfp 6y ago
    Windows updates are replacing that with Edge on Chromium, even on "unsupported" systems like Windows 7, so here's that.
• dstaley 6y ago
  I've seen some incredible things built with Tailwinds, but it still hasn't clicked for me. It seems like you're learning a completely different language for styling and layout. I also have some gripes with optimization in that the suggested solution to eliminating unused CSS is to use a tool that finds classes in HTML files, which is a pretty rudimentary way to accomplish that. (However, I'm sure in more advanced codebases, particularly JavaScript ones, there's probably a better utility to use.)
• have_faith 6y ago
  What kind of projects do people use Tailwind for? and what's the general role of the person using it? I haven't found a use for it myself as a predominantly front-end dev but I've met a few devs who like it a lot but found that they were generally less comfortable writing plain css without a framework. No shade towards Tailwind intended, just not a paradigm I've gotten on board with yet and trying to understand.
  • ev1 6y ago
    I use tailwind with frontend components. I don't think you're actually supposed to keep the atrocious classes as-is all the way to the end. Or for rapid browser prototyping if I want to get a layout up quickly. For example, my component uses something like this: .btn-indigo { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75; } In the end, I get a <button class="_1aZeRTY"> or similar and that's it, no mess. All of it gets compiled down, and any Tailwind classes I don't use don't make it into the final .js file
  • slow_donkey 6y ago
    Any type of project. Before Tailwind existed, I used a similar system but Tailwind is obviously more complete than what I'd roll in a week. I really don't think of it as a framework since you're still specifying which CSS properties you want to apply, just indirectly via classes.
  • qudat 6y ago
    We use it for a large enterprise webapp. We have a component library that uses react and applies the correct classes to the component there. I came from mostly using styled-components (CSS-in-JS) and tailwind has worked pretty well for us. The benefit of tailwind over css-in-js is primarily one of performance. The downside is all styling gets shoved into the `className` prop which isn't great. If I had full automonomy to choose the css "framework" I would probably opt for something like `rebass` https://rebassjs.org/ https://rebassjs.org/
    • have_faith 6y ago
• mehrzad 6y ago
  Using `yarn upgrade tailwindcss` only brought me up to 1.9.6. I had to specify the version to get it to upgrade.
  • rnmp 6y ago
    I would assume it's by design. A simple upgrade would potentially break at the very least the colors that you're using (they updated the built-in color palette).
    • mehrzad 6y ago
      That's understandable, but they didn't clarify that at all in the upgrade instructions, which say to just use "npm install tailwindcss" to upgrade. edit: And it also broke PostCSS somehow. What a mess! edit 2: I just noticed the "@latest"
• mixmastamyk 6y ago
  > Extra wide 2XL breakpoint, for designing at 1536px and above Is it still common for folks to use pixels in their CSS? I moved to em and the rest around 1999 (I think). What is the reason to stick to pixels?
  • Wolfr_ 6y ago
    Most people use rem these days, but there are common browser bugs with using rems or ems in media query rules, so in the rules specifically it is common to still specify pixels, even if the rest of your stylesheet uses rems or ems.
  • Freak_NL 6y ago
    Also the magnificent rem (root em) unit.
  • franga2000 6y ago
    I think that's referring to screen width. As in, breakpoint for when screen witdth is >= 1536px and as screens use pixels, that is the only unit talking about screens is reasonable in. em/rem/whatever don't make sense in media queries.
    • mixmastamyk 6y ago
      I see, thanks y'all.
  • harrygeez 6y ago
    px is still easier and more convenient to reason with, plus it's more readable. I use px in my code but I also use a postcss plugin to convert them to rem during build time
  • minitech 6y ago
    Pixels have always had their uses, but I moved from em to pixels even for sizes that would ideally scale with text in order to be able to get things to align to whole vertical pixels (and horizontal ones, when not centered).
• DominikD 6y ago
  I used to like web development some 15 years ago. Ever since frameworks became a thing, I stopped doing any web development. I simply couldn't get myself to setting up a bunch of tools just to process some byzantine file formats to a usable CSS. It was a really great feeling when I discovered Tailwind. Not only building custom, trimmed stylesheets required a single command, everything about using it just clicked. Kudos to people behind it!
  • ehnto 6y ago
    Lord, if you tapped out even 5 years ago you still skipped the worst of it. It's relentless, I feel like clean software is hard to find in web development. Web apps are so often written with 5+ different technologies and frameworks all jammed together, and everyone picks a different combination.
• lxe 6y ago
  TailwindCSS is great but I wish it didn't require custom postcss build pipeline. You can use the prebuilt css file, but it lacks some features.
  • lemonberry 6y ago
    I don't know if it will suit your workflow but Laravel Mix is pretty easy to use. I use it to process my CSS and JS on Laravel and non-Laravel sites.
• lemonberry 6y ago
  The things I love the most about TailwindCSS: 1. After purged the CSS file is really, really small. 2. Hopping into all of my projects and not having to remember new class names. 3. Not having to come up with new class names. 4. Not worrying about making a change in a class and having unintended consequences. 5. Not skipping back and forth between HTML or CSS files. That said, if you don't dig it, there are plenty of other great frameworks, naming conventions and approaches that people use. Or start from scratch and roll your own. For frameworks I flirted with InuitCSS for a bit. It's pretty nice and after digging through the code I realized it's not as complex as it first appears. I also like Andy Bell's approach with Cube CSS.
  • aidos 6y ago
    I’ve been keeping an eye on Tailwind. Over the last few years we’ve switched from old school single css file to css in js, and while that helps with the class spread issues, by lots of other measures it’s inferior. This was solidified for me last week when we rebranded our app and I needed to hack in both new and old code. Editing is js controlled css in the browser is just too painful. Anyway, couple of weeks back I needed to make a website for a mate and decided I’d give tailwind a spin. My god does it make css fun again. I’m not sure how you look after sprawling styles in a bigger app (though I’m sure I’ll figure something out) but having the right combination of safe css, everything right there and responsive styling locally is a dream. I’m totally sold.
  • JxLS-cpgbe0 6y ago
    > 5. Not skipping back and forth between HTML or CSS files. What? I thought the point of this was for use with composable JS components. You're manually writing and updating attributes like this?! class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10" How could you possibly manage this without components? Ctrl-F "lg:text-7xl" and replace?
    • ssijak 6y ago
      You make components as usual, but you style with those utility classes. Those utility classes are configurable in one theme file where you can set what "text-4xl" is or how much space "mt-10" is.
• timdorr 6y ago
  For those complaining about dense HTML using Tailwind, the headline feature of 2.0 should be @apply for everything: https://tailwindcss.com/docs/functions-and-directives#apply https://tailwindcss.com/docs/functions-and-directives#apply It lets you move all of those excessive class attributes into your CSS, where it realistically belongs. And that makes your CSS look a little more like CSS. But you get guard rails on it by applying a known set of properties to each rule. It's really the best of all worlds.
  • cosmotic 6y ago
    At that point, what is tailwind offering?
    • timdorr 6y ago
      Again, guard rails on those property sets. You are locked into a set of values and they are unlikely to conflict in some odd way. You can also apply configuration changes globally that might affect multiple properties. If you're changing from px to rem for sizing, you can do that without having to go through your entire code base to update that. Or if you need to tweak a color, it's applied everywhere, including computed values (color variants).
      • chrisan 6y ago
        How is that different than Sass with some of the same classes `items-center`, `flex-auto`, `space-x-3` etc?
        • JxLS-cpgbe0 6y ago
          Or the utility classes in Bootstrap?
  • nfRfqX5n 6y ago
    using @apply adds all of those properties and values into a new css class right? you're adding extra lines to your bundle
• darkhorse13 6y ago
  Always have been a huge fan of Tailwind CSS just for the amount of passion that is clearly behind it. The whole utility-only approach is not for me - I prefer a middle ground with utilities and pre-built component classes. Although I am also building a CSS framework, I can only wish them the best of luck. This update looks freaking amazing! Edit: Removed link to avoid self-promotion.
• cosmotic 6y ago
  Tailwind smells like using a style attribute but with properties that are fewer characters. It's fully embracing what everyone said to avoid. What am I missing?
  • lemonberry 6y ago
    One huge difference is that you can use media queries with TailwindCSS and you can't with the style attribute. I think the best defense of Tailwind's approach is from Adam Wathan in this post. https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
  • seancoleman 6y ago
    You're likely missing 2 things: 1) you probably haven't delved into Tailwind on a non-trivial project and 2) the nuanced difference is between infinite possibilities (style attribute) vs. discrete, "hard-coded" options (Tailwind classes). Think of strings vs. enum values when describing "types" in an application.
    • byte1918 6y ago
      Apologies if this seems snarky but it would be far more useful if you could explain your point rather than a generic condescending "[you] haven't delved into Tailwind on a non-trivial project".
      • singemonkey 6y ago
        I don't think they were being condescending – there's a lot of material out there on why Tailwind is good, it's easy to find via Google, but nothing beats trying it out. If you don't want to do that then you could watch some of Adam Wathan's screencasts on YouTube where he uses Tailwind to recreate pages or build new ones. https://www.youtube.com/c/AdamWathan/videos?view=0&sort=p&flow=grid https://www.youtube.com/c/AdamWathan/videos?view=0&sort=p&fl...
        • 6y ago
• thr0w337 6y ago
  Anyone using the paid Tailwind? Is it worth the price?
• k__ 6y ago
  Half-OT: Are there good UI toolkits out there based on Tailwind? I read it is really flexible, but I don't want to start from zero. Most of the time I want to throw some pre-made UI components together and then sprinkel them with customizations when required.
  • HEHENE 6y ago
    Tailwind themselves offer a paid one called TailwindUI[0]. It's still in early access, and I commonly run up against components that are missing and I have to devise a style for myself, but it provides a pretty good starting point for building out a clean looking web app. [0] https://tailwindui.com/ https://tailwindui.com/
    • k__ 6y ago
      Pretty nice, thanks!
      • Scarbutt 6y ago
        It's still pretty immature and buggy, so unless you have no problem fixing blocking issues yourself I'll suggest waiting until it becomes more mature.
        • k__ 6y ago
          I don't need it today, but would be nice to have something like that in the future :)
  • tbassetto 6y ago
    Tailwind UI, by the same authors. But it's a paid product.
• RivieraKid 6y ago
  Tailwind is great, my main issue when I used it was that I felt restricted by the limited set of sizes. I wish it was possible to use e.g. "m-7px".
  • stefanfisk 6y ago
    I tend to just extend the config with whatever sizes I feel that I need.
  • keithnz 6y ago
    Tailwind out of the box is a bunch of really good defaults, but it won't suit all designs, but the essence of tailwind is how it builds it's classes and you can quite easily make your own combinations. See https://tailwindcss.com/docs/customizing-spacing https://tailwindcss.com/docs/customizing-spacing
  • christophilus 6y ago
    I think they added a bunch in 2.0, so you may want to double check that.
  • Atomskun 6y ago
    https://acss.io https://acss.io
• spdy 6y ago
  Probably the best invention i added to my tool belt for a long time. Never was i able to move so quickly to style components in a way that works and you only have to learn one set of keywords. Reminds me a little bit of vim learn once apply everywhere :). Props to the creators of tailwind !
• sasha_fishter 6y ago
  Incredible work by Adam and team. I'm using Tailwind from beginning and I have so used to it that I'm not even thinking to go back to whatever Bootstrap, Bulma, etc. It's such a joy to work with TW. Once you try to tinker around with Tailwind there is no back, trust me.
• jcnh74 6y ago
  that video is quite aggressive.
  • omnimus 6y ago
    It's so cringe i was thinking thats joke at first. I guess that happens when you invest and hire some outside help and sometimes it ends up a bit... unsophisticated? I am big Tailwind user btw.
    • adamwathan 6y ago
      Framework author here, yep it is a joke. We literally had the music scored for us by a friend with the goal of making it as outrageous as possible. There's a real opera singer chanting "utility first" in Latin at the end. It's a parody of itself :)
      • omnimus 6y ago
        I thought its because of your love of heavy metal!
• seancoleman 6y ago
  "Incompatibility with IE11, so you can tell the man upstairs 'sorry boss it's out of my hands, blame Tailwind'..." I know it's said tongue-in-cheek, but popular frameworks taking this stance is valuable when convincing clients, leaders, authority, etc. to not require IE support. I've consulted on dozens of front-end projects, and showing the stance of "industry leaders" is the most convincing argument.
  • youngtaff 6y ago
    That's the tail wagging the dog though… I've got clients whose customers using IE11 represent 1-2% of revenue i.e. $1M+ / year
    • swyx 6y ago
      yes but one of my central arguments [1] is that it is time to explicitly charge customers for IE11 support rather than implicitly have your 99% of customers subsidise support for the 1% 1: https://www.swyx.io/ie11-eol/ https://www.swyx.io/ie11-eol/
      • cblconfederate 6y ago
        these customers are obviously the poorest percentile
      • youngtaff 6y ago
        Yes, but you're using that argument in the context of a software business rather than a consumer facing retail business
    • onion2k 6y ago
      How much could they increase the revenue from the 98-99% by if they dropped IE11 and moved faster, spent less time on supporting old browsers, or embraced new features? It's possible (even likely) that simplifying the code by supporting fewer targets that need additional work would increase the overall profit.
• misiti3780 6y ago
  Has anyone created a react library that is well maintained with the tailwind framework?
  • chrisweekly 6y ago
    twin is a babel macro that supports integrating tw util classes with css-in-js libs like emotion
    • misiti3780 6y ago
      thanks.
  • propelol 6y ago
    I know the Tailwind guys are working on a project called Headless UI[1]. It's a component library without the styling. There is also Tailwind UI[2], which is more like Bootstrap. Both are official Tailwind projects. 1. https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-components https://blog.tailwindcss.com/headless-ui-unstyled-accessible... 2. https://tailwindui.com/components https://tailwindui.com/components
• Bishonen88 6y ago
  Looked into tailwind 2-3 times and simply couldn't see the appeal. Working on analytical-dashboards in react, I mostly end up writing css straight in js using material-ui's makestyles. There's only so many components to style before I start reusing them and the css needed to make something 'not-look-too-crappy' is actually quite low. Now after learning all the css basics, I'd have to learn yet another 'system' again? I think I'll pass. On the other hand if I'd be constantly restyling webpages with hundreds of different components etc., I might consider it again...
  • joshpadnick 6y ago
    What you're missing is that there's overhead in writing CSS-in-JS. You have to switch context from HTML to JS, you have to keep track of the "link" between your CSS-in-JS and your React component, you have to deal with cascading styles, and hopefully you're able to keep all styles across all components consistent. Tailwind cuts through all of that and says: - Just declare the styles you want directly in the HTML - If you're repeating styles, use @apply - Limit the number of styles available to your project to enforce a de facto design system
    • mikewhy 6y ago
      Material UI still fulfills all those points, unless I'm missing something: - Just declare the styles you want adjacent to the component - If you're repeating styles, make a component - material-ui has a design system / theme that you're encouraged to use Like Tailwind has `class="mb-6"`, mui has `<Box mb={6} />`.
• Exuma 6y ago
  Tailwind is the best "css framework" ive ever used in my entire history of web design / programming.
• leemcalilly 6y ago
  What often gets missed in the tailwind debate is how it forces you to use a design system. When you’re writing CSS by hand it can quickly get out of control when you need to bump something up or down, left or right by a notch. If you add padding it should be related to font size, line-height, etc on some sort of cohesive, harmonious scale. By using a Tailwind class of py-2 rather than writing a CSS class you can be confident that the change will fit with the design system as a whole. This is much better for most people than creating your own design system from scratch every time you need to make a web page. Once your design starts to solidify, just extract out common components like “button” out of the html using @apply.
• seancoleman 6y ago
  Tailwind is the most counterintuitive yet obvious-in-hindsight CSS tool (or of any class - no pun intended) I've worked with. I know the general sentiment towards Tailwind is "I spent years getting my separation of concerns with HTML/CSS down, but now you're telling me all that is backwards and CSS Zen Garden is blasphemy?" I was in the same boat. Tailwind just felt wrong, and with 15+ years of experience, I've come to trust my intuition. After watching several videos, and reading all the canonical articles on Tailwind, I still wasn't convinced this was anything more than a fad full of bad practices. But the one thing I'll let trump my intuition is curiosity. So I used Tailwind on a medium-sized project for a couple months and was blown away by the productivity and maintainability. It took using it for a couple weeks to "get it". I had a positive ROI on this project, even considering the learning curve! If you still think "Tailwind feels wrong, what am I missing?" I'd suggest reflecting on the following: 1) You probably haven't actually delved into Tailwind on a non-trivial project. I understand learning a new framework isn't a trivial undertaking, but it's the only thing standing in your way of discovering your "truth". 2) If you feel Tailwind is too much like inline styles, think of the difference between the infinite possibilities of strings defining a "type" vs. a discrete enum type. Tailwind classes are the enum type values. 3) If you're struggling to abstract reusable higher-level classes/components, the problem might actually be with inconsistent and non-modular design, not CSS tooling. If every page or section is a "unique work of art" then you may have poor UX/design.
  • JMTQp8lwXL 6y ago
    I'll identify as in the "not yet convinced" category on Tailwind (though, I have evolved on other paradigms, which I will now discuss). JSX felt wrong (at first) due to co-mingling HTML and JS, however, I realized that's the wrong application of concerns because 1. JSX isn't HTML, it's a sugared syntax for the React.createElement API and 2. that separation wasn't meaningfully improving my architecture and in retrospect was clearly holding us back. Could anyone evaluate if these are analogous 'separation of concerns' (SoC) fallacies? I will admit, I think I never fully appreciated the intent of SoC.
    • madeofpalk 6y ago
• Kiro 6y ago
  I used to a skeptic, to the point where I thought it was completely ridiculous. Then I realized that I was over-using inline styles anyway since I was always afraid of messing with old CSS. I was adding layers of overwrites just not to accidentally change something unrelated. Now I can't imagine myself ever writing regular CSS again. I just love how I can look at the HTML and instantly "visualize" how the component will look just by seeing the classes. No more mysterious cascades where it's hard to pinpoint where the styling is coming from. It makes iteration so fast and responsive design has never been easier.
• treelovinhippie 6y ago
  Re: bloated HTML. Has anyone built a vscode extension that can toggle the style classes on/off? Would also be cool to hover on a HTML block and see it highlighted in a browser hot-reload view.
• jms55 6y ago
  I've been using tailwind for a chess game (https://github.com/JMS55/chessmatch https://github.com/JMS55/chessmatch) and so far it's been really good, and the first time CSS has clicked for me. My only complaint is that the html templates can get kind of messy, but that can probably be solved with @apply or splitting the template into pieces.
• LVB 6y ago
  I occasionally write HTML/CSS, and have always just grabbed Bootstrap, Pure, something. I've briefly looked at TailwindCSS a couple of times and always end up at: where are the some of the common, basic components? It seems like those are paid for items. Am I on the hook to be e.g. a button designer if I don't buy the bundle?
• ebbflowgo 6y ago
  Love seeing a promo video on a stylesheet library.. expect to see more marketing on open source
• jaredcwhite 6y ago
  This isn't how you HTML, people! https://threadreaderapp.com/thread/1329156451416244224.html https://threadreaderapp.com/thread/1329156451416244224.html I don’t have too many programming hills to die on, but taking full advantage of the glory that is HTML5 is one of them. Tailwind is…the opposite of that!
  • deleted 6y ago
    [deleted]
  • SebastianKra 6y ago
    (I have little experience with Tailwind, but I can still make the following argument) I think you're making a mistake in assuming that the example shows how you should actually use Tailwind in a project. The creator himself has said that Tailwind should be combined with whatever component-system your framework provides. That's how you can get your semantic tags. ...and it's also how you should write Websites anyways - this has little to do with Tailwind. Tailwind can be seen as just a more powerful way of writing inline styles. If you rely on CSS for reusable components, you may be in for a bad time as soon as you need to make even a tiny change in your design.
    • jaredcwhite 6y ago
      The ol' theory vs. practice…that all sounds fine in theory, but all it means in the end is you've taken a giant wad of dig/span tag soup with 30 utility classes and broken it up into reusable bits of tag soup with utility classes. Or you move everything over to @apply…but now you have a bunch of stylesheets which are completely incompatible with every other CSS framework/build system. It's not a panacea.
      • SebastianKra 6y ago
        Nothing's stopping you from using custom-elements inside your components. (In fact, some frameworks like Aurelia are even built around that). If you don't like frameworks, use Web Components.
• kolektiv 6y ago
  I don't do front end dev, and haven't for a very long time, but can someone help me understand how this doesn't lead to inflexible hard to maintain soup? Just to take colours, for a moment. Ordinarily I might define semantic classes, let's say "primary-nav" or "prominent-action" and apply them to relevant things (and use relative selectors for things inside them, etc.). So if I want to change the colour of all prominent-actions across my web app, I just do it in one place. This seems to be demo-ing adding a particular colour class to everything I want to be that colour. So... If I change my mind, what now? I have to find all those places and change the applied class? Search and replace? This seems like the literal opposite of the clean separation I always understood to be the point of styling being separate to markup...
  • joshmanders 6y ago
    Tailwind is completely flexible, if you would rather have your colors be `brand-light', `brand-dark`, etc you can. Just update your config however you want. It just comes with a config out of the box that is highly usable for any app and any need without customizing. Purge then allows you to strip out all the extra unused CSS in production.
    • kolektiv 6y ago
      Ok, so I could mark everything as "brand-dark" and then change the definition of that in the CSS? Mmm. Ok. How about layout and sizing? A lot of that looks a lot more defined - I'll pick a random example from their own homepage then: "border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 px-4 sm:mx-0 sm:px-0" - if I wanted to change my approach to centring, justification, and sizing, it still seems like a lot of search and replace... (I think I understand that the approach is that I'd then change what those definitions mean centrally - but that won't help me if I decide that two properties which are currently different should be the same, or vice versa).
      • _jjkk 6y ago
        Layout tends to be a property of a particular component, and semantic classes don't work well there either. In a complicated codebase with multiple devs, the number of times you could confidently make a "one-place-CSS-change" to a semantic layout class is very small. It's likely that in one place or another, some dev made an assumption about your `sub-container` class or whatever, which causes your change to break their layout. Most large codebases thus end up with a TON of very specific class names (often used in one place), so the dev can be confident in their layout; this is the biggest contributor to unmaintainability that I've seen in large applications. If everyone is forced to use e.g. d-flex justify-content-center ..... it hugely improves readability as any developer can quickly look at any layout and see what is going on without building a mental index of semantic class names that the original dev chose.
• adamwathan 6y ago
  Framework author here! Don't miss the new landing page, it is probably the part I was most excited to share :) https://tailwindcss.com/ https://tailwindcss.com/ Crazy amount of effort went into building all of these interactive examples, so proud of how it turned out. The trailer in the blog post is absolutely 100% a joke in case it's not obvious. The music was scored for us by a friend, and that's a real life professional opera singer at the end chanting "utility first" in Latin. It's completely absurd and absolutely outrageous, just laugh at it :)
  • Kelamir 6y ago
    I love the trailer! The part about dark mode was blazing.
  • switch007 6y ago
    That is an absolutely beautiful home page. Very Apple. Well done!
  • nwsm 6y ago
    Love the trailer, and great job on the entire release.
  • swyx 6y ago
    for tailwind 3.0 i would love for you to bring your rock/metal passion into the video!
  • vedantrathore 6y ago
    That might be one of the best landing pages I've seen. I'm sold.
  • wanderer2323 6y ago
    both landing page and a trailer were fantastic
  • antonio-ramadas 6y ago
    I don’t want to steal the focus from the achievement, but the landing page fails to open on Safari on iPad Air 2013.
• bredren 6y ago
  Can anyone comment on the current state of React Bootstrap versus Tailwind? There was a relatively recent React Round Up episode where people seemed unconvinced on tailwind: https://podcast.app/rru-react-tools-codebase-management-and-more-with-brice-ayres-e101838552/?utm_source=ios&utm_medium=share https://podcast.app/rru-react-tools-codebase-management-and-...
• syamilmj 6y ago
  We’ll have an entirely new generatiom of front-end developers who don’t know anything about CSS beyond some arbitrary class names soon.
• omnimus 6y ago
  So the biggest advantage of tailwind in my opinion is that it enforces some structure in CSS. I work on small, highly custom designed/branded websites (like marketing product sites) often times with bunch of freelancers of differing skill levels that i might have never worked with before. We also often pass the site to someone else to maintain and upgrade after its finished. For my usecase Tailwind has been simply revelation. If you look at CSS methodologies like BEM, ITCSS, CubeCSS they require developers to learn them and be very disciplined to follow them. These methodologies are probably very effective in orgs where employees work long term. In my case it's always just matter of time before they start to break down. It just takes too much time to onboard devs. Maybe it's not so much about Tailwind being better or the "right way" but about it making very clear how you should structure CSS (put it in html and tailwind.cofing). Other frameworks like bootstrap also enforced something but Tailwind is not UI kit. It infinitely more customizable it can have any look. Tailwind creates less technical debt? Maybe that's how to describe it? For others it will be the exact opossite.
• haloweed 6y ago
  ziahhahahahh
• kd22 6y ago
  For someone who really wants to learn CSS from scratch, is it a bad idea that I start learning CSS by using tailwind? I am mostly a backend dev and trying to learn UI dev since I need it for some side projects.
  • rootlocus 6y ago
    Depending on how much time and effort you want to invest, learning how something works will always be more useful than learning how to use it.
  • propelol 6y ago
    My developer co-workers and I have talked about teaching our designers how to code with Tailwind. The designers have no experience with writing code, but I still think its a good idea to start with Tailwind because you'll use many of the best practices and avoid a lot of the historic madness in the CSS world.
• holtwick 6y ago
  CSS/Stylus framework inspired by Tailwind, trying to respect the content semantics https://github.com/holtwick/windy-css https://github.com/holtwick/windy-css
• gitgud 6y ago
  I like the new addition of css grids, transforms and gradients. Now my projects will have literally ZERO css!!
• sam_goody 6y ago
  1. Tailwind is awesome. 2. I hate the new website, sorry. The old one was clean, focused and clearly portrayed what TW does. The new one is IMHO big, loud, and a lot less focused. 3. I have had endless issues compiling with npm[1], and am using yarn just because of tailwind. Anyone else with this issue? 4. 30 minutes to upgrade is a lot when you manage thirty sites. Though if it is not worth it, no one is forcing me to upgrade. 5. There are some really awesome tools out there that complement tailwind, like tail-animista.vercel.app and tailwind.ink, and some collections like bestoftailwind.com. 6. tailwindui is really nice, and gives the best of both worlds compared to something like uikit. Partly I feel that the creation of tailwindui took the wind out of the sails of sites like tailwindcomponents.com (of which there are quite a few) which is a shame, since a community can do more than even a dedicated team. But partly I wish they would filter, organize and promote all the neat tools that there are on tailwindui. [1]: https://github.com/tailwindlabs/tailwindcss/discussions/1891 https://github.com/tailwindlabs/tailwindcss/discussions/1891
  • markdown 6y ago
    > 2. I hate the new website, sorry. I've spent way too much time trying to find the screencasts that were there yesterday and seemed to have disappeared completely. Now they link to somebody's Youtube Channel. How the hell am I supposed to complete my WorkCation app now?
• withinrafael 6y ago
  I use TailwindCSS for some personal projects, works great, no major complaints. But as a dev in the government sector, I'm disappointed in the way they just whimsically dump Internet Explorer 11 in their release notes [1], as if it's a minor thing / cool to hate on. In my bubble, there's no alternative right now. Switching to a more modern browser requires an enormous amount of agility throughout the pipeline that does not exist. To adopt a shiny new browser, agencies would need to push browser updates to all their client machines every ~4-6 weeks [2]. Solution providers need to perform continuous testing on their web apps (browser vendors do not guarantee minor updates are backwards compatible), creating patches, which need to be submitted to the government for regression testing... and oops that took too long and the next EOL is here. With Microsoft's surprise obsolescence of Internet Explorer 11 across all its cloud offerings 1Q 2021, we're headed straight into a brick wall. Very interested to see what shakes out here. I suspect initially we'll see the government just deploy and use older unsupported copies of Chrome/Edge browser, under the guise of "well it's better than IE11 right?". Longer term, ...? [1] https://blog.tailwindcss.com/tailwindcss-v2#incompatibility-with-ie11 https://blog.tailwindcss.com/tailwindcss-v2#incompatibility-... [2] Vendors do not support these versions after EOL for any reason. Firefox has an ESR branch, bless them, but some agencies have now increased scrutiny of Mozilla software for recent political/security reasons.
  • pikseladam 6y ago
    Of course you can still use your current system but with windows 10, most of ie11 users switched to never browsers and current use of ie11 is under %1.5 right now. https://www.w3counter.com/globalstats.php?year=2020&month=10 https://www.w3counter.com/globalstats.php?year=2020&month=10
  • mintone 6y ago
    Whenever this comes up I wonder whether there is an opportunity to create a govt specific browser (based on Chromium initially say) which abstracts responsibility to a specific vendor with clearance ala Lockheed or similar. Web is only going to become more of an a) complex environment and b) normal daily workspace for users so it makes sense in the longer term, and considering the size of market we're talking about, licensing would make it worth it.
• Wump 6y ago
  For anyone who's interested, I put together a repos to bootstrap a react with typescript and tailwind project. It's intentionally fairly barebones, but I've found it useful to get a wide variety of projects started quickly: https://github.com/figelwump/react-typescript-tailwind-bootstrap https://github.com/figelwump/react-typescript-tailwind-boots... I've come to love Tailwind, after a few failed attempts at using it. Recommend trying it!
• pythonist 6y ago
  Tailwind released 2.0, but it is a result of constant work releasing new versions gradually and listening to the users. This is a very active project and it is good to keep an eye on new things https://newreleases.io/npm/tailwindcss https://newreleases.io/npm/tailwindcss. Actually, 2.0.1 is out already. :)
• rutierut 6y ago
  I really think writing component-scoped and BEM named CSS with Tailwind is the sweet spot here. For example: .menu { @apply w-full h-12 bg-gray-100 flex flex-row items-center; &__icon{ @apply h-8 w-8 object-fit; } }
• nelsonenzo 6y ago
  This is neat. I actually wrote my css similar to this 10 years ago, but was laughed at by "the smart devs". I'm glad to see I was right all along. Don't let imposter syndrome get you kids, it's a hell of waste of time.
  • nelsonenzo 6y ago
    Not sure why I am getting downvoted :/. Just wanted to complement the product and encourage others not to be down on themselves. I'm going to go commit suicide now. Sorry for bothering any of you.
• ghego1 6y ago
  Tailwind 2.0 palette color might be the sexiest on the interwebs, now featuring 50 shades of gray.
• muhammadusman 6y ago
  Wow, the homepage for Tailwind has me excited to try this. I haven't seriously considered using a full on UI framework since early Bootstrap versions :)
• joshspankit 6y ago
  I mean, that’s a damn impressive video. In the moment I totally want to throw out all other CSS and dive in.
• irrational 6y ago
  Does anyone have any thoughts on Tailwind UI?
  • christophilus 6y ago
    I love it. It’s saved me a lot of decision making on my current project.
• Wolfr_ 6y ago
  I don't get why Tailwind is so hot. Do any of you actually maintain large custom design systems? Where the same system is used across multiple code bases, with varying components, where you need to be able to accurately replace the look of a component, that might be coded in multiple dev environments (Angular, PHP, React...)? If so, you would be running away from this approach fast. BEM/ITCSS all the way. How would you globally replace something that is marked up like this (example appears somewhere else in this thread)? How would you assert what this code means across projects? class="text-4xl sm:text-6xl lg:text-7xl leading-none font-extrabold tracking-tight text-gray-900 mt-10 mb-8 sm:mt-14 sm:mb-10" With BEM/ITCSS, you would have a custom namespace like `auk`: class="auk-btn auk-btn--primary" And you can reason about it, maybe in project 2 it is class="auk2-btn auk2-btn--primary" So now you can refactor the old buttons out to replace the new buttons. Good luck with the mess above. If people say: you can use `@apply`. Yeah. If you write your whole stylesheet in `@apply` logic, why are you using Tailwind at all? Design tokens and the re-use of design variables is not a Tailwind thing by the way. Some people seem to be acting like it is. We've had variables in Sass for over since 2009. People have been doing clever things with variable maps (arrays) in Sass since forever. There's no way Tailwind can take credit for this. I've written extensively about why Tailwind is problematic: (1) https://johanronsse.be/2019/11/11/thoughts-on-tailwind-css/ https://johanronsse.be/2019/11/11/thoughts-on-tailwind-css/ (2) https://johanronsse.be/2020/07/08/why-youll-probably-regret-using-tailwind/ https://johanronsse.be/2020/07/08/why-youll-probably-regret-... (3) https://johanronsse.be/2020/08/20/hey-your-api-surface-is-causing-unnecessary-complexity/ https://johanronsse.be/2020/08/20/hey-your-api-surface-is-ca... Don't fall for it! The marketing is sweet but the choice will hurt you in the end.
  • sebmellen 6y ago
    You can easily just add a BEM tag for that specific component which has no function but allows you to easily find and replace. This is what I do with Tachyons and Tailwind. I like the ease of building with it, especially for a small startup - https://app.assembl.net https://app.assembl.net and https://assembl.net https://assembl.net are both Tailwind. With the @apply directive, Tailwind components, and dead BEM classes for find and replace, tailwind is a joy - and so maintainable!
  • 6y ago
• takklz 6y ago
  LOVE tailwind! couldn't have build www.outseed.io without it :)
• Taig 6y ago
  I'm quite interested in frontend technology and enjoy to take a look at announcements like these. But at the same time my knowledge about JavaScript is extremely limited. So just out of curiosity: Why is the theme fontSize defined as xs: ['0.75rem', { lineHeight: '1rem' }] rather than something like xs: { size: '0.75rem', lineHeight: '1rem' } ?
• brunoqc 6y ago
  Any great alternative to material-ui? It's going to be open core and will make us pay for "advanced enterprise features" like a date range picker.
• mpcannabrava 6y ago
  Lol... Incompatibility with IE11 touted as a feature is really good.
• alphachloride 6y ago
  I never envisioned a web dev tool would have trailer music like that lol.
• kumarvvr 6y ago
  For those using libraries / frameworks like React / Angular / Vue / Blazor / Etc. just try Tailwind. It's awesome and fits very well with component based UI systems. You will have a slight learning curve, but I recommend you try to learn the classes, style your components without looking at the docs for a week or so, and believe me, your productivity will shoot up, and most importantly, you will start thinking in terms of design, look & feel, rather than how do I encapsulate this in css class.
• dinkleberg 6y ago
  I think tailwind is the first thing I’ve ever realized I’m a hipster about. I’ve been using it since early on and bought tailwind UI the instant it came out. I love it. But now that’s it’s super popular I can’t help but wish it was still a quite little secret. Every other product hunt or show hn seems to be using tailwind with all the default configurations so they all have the tailwind look, just as every new startup used to have the bootstrap look. And there are so many tailwind UI knockoffs and tailwind tutorials out there it is insane. I’m super happy for Adam and all the success he and the team are having. Tailwind is a truly great library and now ecosystem.
• AtOmXpLuS 6y ago
  Everything in AtOmXpLuS
• gsvclass 6y ago
  I switched from tahyons to tailwinds like 3 years ago and been using it every since on all my React projects. I have tried all the CSS-in-JS stuff etc nothing compares to the dev speed with Tailwinds. Checkout https://42papers.com https://42papers.com it's all tailwinds and has a darkmode too.
• sandGorgon 6y ago
  It is still very hard to get it to work with React Native mobile apps. I wish there was an official compatibility package.
• Brajeshwar 6y ago
  This is an awesome news. Thanks to the team at Tailwind. I migrated a big-ish project to TailwindCSS about a year and a half. I like it for the fact that I can train juniors to be productive and part of the big project quickly while the experienced developers can graduate to using it as a utility for their styles. For those worrying about not being able to work on the type scales, etc. I would suggest trying to use Tailwind as your utility and write your own SCSS. Try this out for your Styles. 1. Includes Tailwind CSS. 2. Create separate components for repeatedly used set of Tailwind classes. See examples at https://github.com/valinorearth/valinor.earth/tree/master/src/css https://github.com/valinorearth/valinor.earth/tree/master/sr... This is our Startup's website built in the open. A bit overkill but was our attempt to do a multi-lingual Static Site with 11ty + Tailwind + AWS s3 + Cloudfront + Github Actions/CI and other interesting toolsets. For instance, .button { @apply inline-block py-2 px-4; @apply no-underline bg-water-600 text-white; @apply border border-water-600 rounded; @apply transition duration-100 ease-in-out transform; @apply leading-tight; } For any number of team-size, I suggest maintaining design-tokens in the Tailwind Config. Of course, do post-process your styles with the likes of PostCSS — postcss-import, autoprefixer, etc. For those asking for simpler CSS/Styles, I believe Tailwind might not be the right one for you. I don’t really write codes these days (quite a few years actually) but I tend to do a lot of marketing landing pages, brochures-types for prospective customers, and throw-away prototypes. These days, I like the plethora of classless CSS available for me to choose from. I might have even created one for our internal use based off the NordTheme color palette (will try extending it with TailWind). Here are some of them for you to start off - https://github.com/dbohdan/classless-css https://github.com/dbohdan/classless-css I have come back full circle and now just write in plain CSS for the marketing pages. I was once a purist and started with tools such as Hotdog Professional, Ultradev as an IDE. Tools such as Tailwind has their places and we are standardizing it for all of our websites, customer dashboard, admin, etc. Check out the Tailwind’s own TailwindUI at https://tailwindui.com https://tailwindui.com
• citrons 6y ago
  I took over a fairly large project which used tailwind v1. Have a low-hate relationship with it. I like how fast you can do stuff, but when when a designer creates something a bit custom it all falls part really quick. I understand it solve the issue with reusability and style-guides, but for modern apps that would also mean everything should already be react componentized, so you shoudl not really care about css at that point idealy. I rather use a mix styled-components (easily extendable if you need something custom) and css-variables for dark mode and defining global variables like colors,paddings etc. Plus I route-split so page only has it's related styles.
  • sbergot 6y ago
    I'd say that tailwinds only works if the designer is on board or if you are not working on pixel perfect specs.
  • corytheboyd 6y ago
    Engineers of the world, push back on this stuff! Chances are your designer will want to work with you to make designs fit the tooling used to implement them. It doesn’t hurt to at least try it, ask questions. It does hurt to silently hold grudges and release what you know is suboptimal.
• viviansolide 6y ago
  Is the upgrade enough big to go major?
• habosa 6y ago
  These look like great improvements! I've been using Tailwind one a medium-large solo project and I can confidently say the whole project is MUCH better designed than it would have been without Tailwind, while still looking very custom. Tailwind is not the one true way to do CSS, but it saves me from myself. I think of Tailwind vs Regular CSS how I think about TypeScript vs Regular JS. I could do everything and more in JS, but I'd make so many more mistakes along the way.
• herunan 6y ago
  I don’t understand a lot of the hate here claiming messy HTML. Partials and @apply and it’s all sparkling.
• rikkipitt 6y ago
  Can't wait to upgrade to v2.0. I've used Tailwind CSS/UI very extensively over the last year or more. The time I've saved in my day to day client dev work is incredible. Some of my notable recent projects using the framework include: https://www.hawking.org.uk https://www.hawking.org.uk (Adam Wathan often uses it as an example of how different sites built in Tailwind can look - https://twitter.com/adamwathan/status/1298932488769875968 https://twitter.com/adamwathan/status/1298932488769875968) https://www.paced.email https://www.paced.email (While a bit more Tailwind-esque, the framework has allowed me to concentrate on functionality while knowing the product will look great in the end). Happy the TailwindLabs team is getting the exposure they deserve. Congratulations folks. Thank you for the awesome tools!
• benfrain 6y ago
  Forgive me if this comes across condescending or patronising. Genuinely not my intent... So many people reach for a solution without really understanding their own problem. I'm talking specifically about maintainable code. And maintainable CSS code at that. For scaling CSS imagine a continuum with complete isolation one end (BEM, ECSS et al) and complete abstraction at the other (started with 'Atomic CSS', which then spawned countless others including Tailwind). My experience is that either end of that continuum leads to an approach that can scale well and be maintainable. Mixing of approaches is where people come unstuck because they don't understand why that is problematic. Understanding that fundamental (more here: https://css-tricks.com/scaling-css-two-sides-of-a-spectrum/ https://css-tricks.com/scaling-css-two-sides-of-a-spectrum/) goes a long way to dealing with the problem. My preference is isolation (which I detailed at https://ecss.io https://ecss.io and in the book 'Enduring CSS' about 5 years back — not mentioned to pimp myself, I don't give a hoot if you buy/read)). I like code that is easy to reason about and delete (I like deleting code far more than writing it!) and that suits my mental model. I also believe our job as a front-end developer is to accommodate designs, not turn around and say, "sorry, we don't have a class for 8px margin, it will have to be 5px or 10px". I'm not suggesting this or that framework can't accommodate this need, just highlighting why I feel the way I do and choose the solution I do. Think about how __you__ want to build and maintain code. Don't just jump on something because everyone else does. Analyse your problem. Where are your actual pain points. Find the solution to your own issues. Otherwise you'll just swap one set of problems for another. A framework may very well meet your needs. And by all means listen to others extolling its virtues but that will not save you from a lack of due diligence! [ends attempting to dispense fatherly advice]
• abatilo 6y ago
  Does anyone know how this affects TailwindUI? The paid parts of Tailwind?
• gidan 6y ago
  While it may seems like a great idea, I just finished a project for a client on Tailwind. First of all it's not free, to use UI components it would cost many hundreds of dollars. But maybe cost is not an issue for all, on the other hand productivity might be. I found myself terribly less productive, having many classes like: <div class="mt-8 mx-4 flex flex-col items-center font-medium text-base ..." it's very hard to add or remove a rule compared to CSS where each rule is on it's own line. Also some pretty significant issue for me was hot-reloading taking a lot of time, whereas in CSS you can just refresh linked stylesheet, with tailwind you need to reload complete page, and if your page is hosted on a Django/Symfony/RoR application in development mode, you better have to be patient at each CSS modification !
  • degif 6y ago
    Can you elaborate on what you mean by "it's not free"? Based on Github, Tailwindcss is open-source and MIT licensed.
    • Ankhers 6y ago
      There is a project by the creators/maintainers of Tailwind called TailwindUI[1] that is paid. The pricing appears to start at $149 USD which may not be accessible for everyone. [1] https://tailwindui.com/ https://tailwindui.com/
• taksintikk 6y ago
  +1 for the epic battle music in the video trailer. Solid implementation