Tailwind CSS

A utility-first CSS framework for rapid UI development

get it
#3 Product of the DayNovember 01, 2017

Tailwind CSS is a Utility-First CSS Framework for Rapid UI Development ⚡️

  • Matt Stauffer
    Matt StaufferPartner & Technical Director, Tighten

    It make CSS simple


    The only con I know is that it’s still pre 1.0

    I was able to use the pre alpha of Tailwind to build out my latest redesign of my personal site and it’s really incredible to work with. I’ve been talking with a adam for years about utility classes and it took a long time for me to come around, but I’m now in love and I think Tailwind is definitely the best of the bunch.

    First, it's a utility framework. You're composing your CSS quickly, in the DOM, from really impressive defaults that the Tailwind team has worked hard to perfect--including working with a designer, Steve Schoger, who's tried all the defaults in multiple UIs to test them out.

    Second, it's configurable. Pass Tailwind a configuration file and all of a sudden it's *your* colors, your fonts, your spacings.

    Third, it's modern. The build stack and the way it generates its CSS is something the team has paid significant attention to, starting in Less and moving now to PostCSS. I was able to pick Adam's brain about how he made it work on his podcast: http://www.fullstackradio.com/71

    Tailwind is really powerful. It's fast. It's flexible. I'm a *huge* fan.

    Matt Stauffer has used this product for one month.
    Comments (0)
  • Daniel Li
    Daniel LiFullstack JavaScript Developer

    Less opinionated that Bootstrap, provides more flexibility


    Binds you to the framework, not semantic

    There should be a separation of between structure (HTML), styles (CSS) and interactions (JS). By embedding these classes into HTML, you're basically tying the styles into the structure. This makes your site less modular - if you want to switch to a different framework later, it's much harder - you have to remove all the utility classes from the HTML.

    This problem is not just specific to Tailwind however, all CSS frameworks (be it utility or UI frameworks) that places presentational classes in the HTML shares the same issue. I have explained how to resolve it here - https://stackoverflow.com/a/28824726/3966682

    If Tailwind has Sass support, it would definitely be very useful.

    Daniel Li has never used this product.
You need to become a Contributor to join the discussion.
Adam Wathan
Adam WathanMaker@adamwathan
👋 Hey everyone, maker of Tailwind CSS here! Thanks for hunting us @djug! Tailwind was born out of the frustration of trying to use frameworks like Bootstrap or Foundation to build sites that looked completely different than the defaults those frameworks provided. Instead of providing an assortment of higher level UI components like buttons, forms, cards, etc. all with baked in visual design decisions that you have to constantly fight to change and undo, Tailwind provides extremely low-level utility classes that you can use as building blocks to compose more complex pieces of UI. There are other "functional" or "atomic" CSS frameworks out there (Tachyons, Basscss, ACSS), so here's what I think makes Tailwind unique and why it was worth building: - Tailwind is highly customizable, and the customization story is a huge part of the framework's identity. Tailwind is implemented as a PostCSS plugin, and configured in JavaScript. You have full control over your color palette, type scale, spacing scale, box shadows, border sizes, etc., and *how* you customize all of that stuff is heavily documented and very first-class in the framework. - Tailwind uses a very human approach to class naming vs. the incredibly abbreviated and dense naming you see with a framework like Tachyons. That's not to say it's objectively "better", but it's a different and some folks will prefer that. - Tailwind doesn't demonize component classes. We don't think `.btn` is an anti-pattern, and we give you tools to make it easy to extract classes like that along with recommendations on when to do it. If this sounds interesting to you, definitely check out the documentation (https://tailwindcss.com/docs/wha...) and please hit me with any questions you have!
Param Aggarwal
Param Aggarwal@paramaggarwal · Web and Mobile Apps.
I would like to hear a comparison with Tachyons CSS (http://tachyons.io) which is also a famous utility CSS library!
Brandon Bayer
Brandon Bayer@flybayer · Making AcornBookmarks.com, Indie Hacker
Joshua Pinter
Joshua Pinter@joshuapinter · Product at CNTRAL. Maker of ntwrk.
@paramaggarwal I'd like the same thing. We used Tachyons to build www.cntr.al and one of my biggest dislikes was all the abbreviations it used that you had to memorize. Things like borders: Tailwind looks like it uses more verbose class names, like `.border-b-4` for bottom border of width 4px, which is more explicit and much easier to comprehend in the long run.
Vince Speelman
Vince Speelman@vinspee · Front End Engineer, TED
Well-documented library which stems from others like http://tachyons.io and (my team's) http://tedconf.github.io/shed-css/ I'm certainly in agreement with this CSS methodology, but I think tailwind has a couple of areas that could be improved upon: 1. The [very first example](https://tailwindcss.com/docs/wha...) shows a couple of different ways of declaring the size "value": - `max-w-sm` - `h-16` on the first one, `sm`, this can mean a number of different things at different times: – `max-w-xs`: Set the element's maximum width to 20rem. – `text-xs`: Set the text size to .75rem (12px). – `shadow-md` (xs and sm don't exist here?): Apply a medium box shadow to an element. This inconsistency leads to addition cognitive load for developers as they have to remember which options are available on each size and what that size actually corresponds to. 2. Rather than _encouraging_ users to "extract components" (https://tailwindcss.com/docs/ext...) in the css layer, consider pushing that to the user's templating layer! Abstraction-free CSS remains up-to-date and becomes one less thing that future-you needs to "check" or "update".
Adam Wathan
Adam WathanMaker@adamwathan
@vinspee Hey Vince thanks for the detailed feedback, I love what you and your team have done with Shed CSS, we've definitely taken inspiration from your work! Some thoughts on your points: 1. The sizing scale stuff is a really tricky problem. Some frameworks try to take a really machine-like approach to this sort of thing, valuing consistency above all other concerns, but we chose to make a different choice with Tailwind. Here's the general thinking behind the scales we use: Numeric scales are always consistent with each other, and are proportional. `.m-8` is twice as much margin as `.m-4`, and each unit is `.25rem` by default and that's consistent across all utilities that use this scale. For helpers like `max-w-{size}`, we started by using the numeric scale but it just became extremely unusable. The use case for those helpers is generally constraining areas of a layout, maybe something like a sidebar width, or the width of a login form. Using a numeric scale, a 40rem max width becomes `max-w-160` which maybe seems fine at first, but you quickly start to get lost when you don't know what values exist in the scale. If 160 is too big, what's the next size down? Is there a 148? Maybe the next one isn't until 120? We didn't want to make the numbers mean something different for different utilities, so instead we opted to just switch the scale to simple named sizes like "sm", "md", "lg", "xl", etc. This made it easy to know what the next size up or down was, because you never had to worry about gaps in the numbers. Named scales like this are always specific to each utility, so `max-w-lg` isn't going to be the same size as `text-lg`. This ended up being the right choice for us and makes the framework feel a lot easier to use in practice, even if it looks inconsistent at first glance. 2. I think a lot of people in the functional CSS community underestimate how many people are working on projects where they don't have a powerful templating engine. Tons of people are just building Wordpress themes; they don't want to turn a single HTML element with a single class like `` into a React component or a Twig partial. I totally agree that there's more than one way to skin the cat when it comes to creating abstractions around repeating utility patterns, but I don't think templatizing every piece of markup in a project is the most practical way to go for every single project. Thanks again for your feedback and for your awesome work on Shed!
Gabriel Nechita
Gabriel Nechita@nechitagabriel · Full-Stack Developer
I was sold on this framework since I've read Adam's excelent article CSS Utility Classes and "Separation of Concerns" https://adamwathan.me/css-utilit... A few days before reading Adam's article I was actually working on my own implementation of a utility css framework for the SPA application I'm building for my client. In a component driven app like any well-built SPA, you really need to compartmentalize the style for that component. Writing small utility classes becomes very useful if you manage to break the pattern of thinking that you are polluting your markup with CSS classes. Also, once you memorize the CSS classes available, writing the CSS from the markup becomes efortless, because you thought process runs almost the same as writing regular CSS. I started collecting working examples and resources about Tailwind CSS on https://tailwindexpo.com to make it easy to see the benefits of using a Utility first CSS framework.
Abdul@abdu1m · Engineer
Pros: Flexibility and 'customizability' Cons: Tens of classes to do simple things (like an info box)
Adam Wathan
Adam WathanMaker@adamwathan
@abdu1m Thanks for the feedback Abdul! I hear what you're saying about adding tons of classes to create seemingly simple components; that's my biggest complain about other "functional CSS" tool kits as well. A big part of what makes Tailwind different is the tooling around extracting those repeating utility patterns into reusable components. Check out this page in the documentation and let me know what you think: https://tailwindcss.com/docs/ext...
Abdul@abdu1m · Engineer
@adamwathan You know what will make it even better, a sharing hub where people can share their creations so we can just add them to our projects 🤓.