6 ms·

Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever

Author of Tailwind here! If you haven't worked with a library like this before, I promise your gut reaction will be "holy hell this is the worst thing I've ever seen" (it was my reaction too!) You really do have to try it to shake that impression. If you need a bit more convincing before you're willing to try it, I wrote an in-depth article a while ago that documents my journey from a "semantic classes"-loving HTML/CSS purist to a utility-loving heathen: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-... If you want to watch it in action, here's a screencast where I rebuild the Netlify UI in an hour and a half without writing any custom CSS: https://www.youtube.com/watch?v=_JhTaENzfZQ https://www.youtube.com/watch?v=_JhTaENzfZQ ...and if you want "social proof", here's an interview I did with Diana Mounter who leads the design systems team at GitHub about how moving to a utility-based approach has made things infinitely more maintainable for them, and given their developers a lot more confidence: http://www.fullstackradio.com/75 http://www.fullstackradio.com/75 If you have any questions I'll be checking the comments, thanks!

rudedogg 8y ago
> "holy hell this is the worst thing I've ever seen" This is so true. All the classes in HTML source look so ugly and verbose when you first see it. At first I dismissed the framework and wondered how someone could think this was a good idea. I kept seeing it pop up, and the comments were always positive, so I put in a little more effort into understanding how it works. Eventually I decided to try it, and within 5 minutes I was making stuff that actually looked nice. I used it to create a really minimal company website, that looks totally custom, and is really lightweight. Thanks for sharing it, I really enjoy using it!
- sleepychu 8y ago
  The problem I have is: what if I want to (for example) add a style or take it away from all my buttons? It's going to be a lot of manual fiddle, or is the idea that hand written sites are wrong to start with and I should be using generated code?
  - makeee 8y ago
    Generally you’d have your button html and classes inside a component so you’re just tweaking that one component.
    - wishinghand 8y ago
      Then it feels like we're just back to writing normal CSS classes.
      - jorgesborges 8y ago
        The real value for me is just being able to sit down and start. The odious first impressions of tailwind are true. But try it out. I like it because I don't waste time flipping back and forth between my document and a style sheet. I don't waste time thinking of clever class names. I don't wait a second to compile css and refresh for every small change I make (even though developer tools have been helpful in this regard, you can only make so many changes at a time). I still break it down into components later but the actual design process is more fluid.
        wishinghand 8y ago
        I use it in production at work. Wasn't my choice. I should have pushed harder for Bulma. Not only is the HTML just a hair length's away from `style` tags, but if I'm writing the same set of classes on more than 3 elements I compose a component. Then I also have to write our own classes for modals, cards, toasts, lists, media objects, drop down menus, side menus, breadcrumbs, buttons, forms, their labels, images and their captions, and get the right mix of responsive utility classes as well so they all play nice together. I'd rather just pick a framework that lets me customize the corner radii, padding, margins, and be done with it.
      - rvense 8y ago
        Buttons are sort of a pathological example. Most components in a web app are container-like things, with collections of a couple of buttons and other things that need to have a cohesive look, internal and external positioning, etc. And how often do you end up with one large, crufty CSS class for each of those, or a handful that are closely tied to each other and the markup anyway? Frameworks like this allow you to easily move that gunk from the CSS to the HTML.
noir_lord 8y ago
Hi adam, small world (I know you tangentially from the laravel community way back when), as always your documentation is fantastically well done.
artworx 8y ago
Thank you so much for this framework, especially the youtube videos where you rebuild a design using tailwind.
thinkloop 8y ago
This [1] is one of the best articles I've read describing the issues and thought processes around the complexities of structuring css. But the suggested conclusions are exactly where I start to have problems. Take this recommendation for example: .align-left { text-align: left; } This is a very reusable class, of course, because it is literally just css but with a different name. But that's what always ends up happening. The lowest common denominator for reusability in css is so low, that you often end up with ridiculously simple classes like this, or close, basically re-inventing css with a different syntax. The new challenge becomes learning this new language and how to compose it. The core issue with CSS is that it has divergent architectural characteristics simultaneously. On the one hand there are usually a set of extremely re-usable primitives: btn, normal-text, overlay, card, etc. Then very quickly, we get higher-level components/styles that are extremely not re-usable: order-form, contact-page, etc. And other stuff in between. Applying the same structural models to all of it will cause sub-optimality at some level. To address this, I've found that applying different models to different aspects of the css most beneficial. Basically having a mix of both utility css, and semantic css. Low-level, highly re-usable components are defined in a utility fashion so that font-sizes, colors and other things are consistent throughout the site. And complex, non-reusable high-level components that compose primitives, and other custom non-reusable css, to define the top-level components. When the need for sharing common css arises, those can be abstracted out into utility stuff, but part of the goal is to keep the utility part small so that people don't have to learn an entirely new language. [1] https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
- fiddlerwoaroof 8y ago
  This is why I like something like sass: your utility classes are all just mixins that you use as needed in your semantic classes.
davepeck 8y ago
Thank you. Your article is one of the most thorough and thoughtful things I've read about this (often frustrating) corner of web development.
deleted 8y ago
[deleted]
tambourine_man 8y ago
What if you need to change justification, image proportions, etc on mobile for instance? Also, from a previous comment of mine: “Problem is, defining quantity in the class name doesn’t work. .m10 may be fine for desktop but not for mobile. Then you’ll have media queries which define .m10 as margin: 5px or something, which is nuts. You could go for unspecified .mSmall etc, but in real life, things tend to be more specific and messier, in my experience.” https://news.ycombinator.com/item?id=18083508 https://news.ycombinator.com/item?id=18083508
- mixmastamyk 8y ago
  Wouldn't using em units be a better idea in most cases?
  - edoceo 8y ago
    CSS has 'vh' and 'vw' units too, changed my life.
    - kaoD 8y ago
      'vmin' and 'vmax' too. I'm experimenting with using 'em' and % everywhere, base font size with 'vmin' and scaling font size with %. Works pretty well for scroll-less apps. Example: https://alvaro-cuesta.github.io/instant-trivia/ https://alvaro-cuesta.github.io/instant-trivia/
      - di4na 8y ago
        Hint : you can also use 'calc' with vw and vh to get some more complex behaviours than purely proportional. You can add an offset, you can do some multiplications etc. Don't go overboard, but a little offset can go a long way
    - tambourine_man 8y ago
      Doesn't solve the problem though. vw, on a vertical screen (portrait mode) is very different from what you have on a ≈ 16:9 desktop screen. The solution is pointed above, even more classes for responsiveness.
baxtr 8y ago
I just wanted to tell you: THANK YOU! I love tailwind. It was a bit of a hustle to get started, but once you're there, there is no way back to bootstrap. Keep up the good work!
chrisfrank 8y ago
Adam, your "Separation of Concerns" article was what sold me on utility-first CSS. Thank you. For anyone building React apps with Tailwind or Tachyons, I just open-sourced a library that makes it easier to reuse CSS classes in standalone, customizable components: https://www.npmjs.com/package/nanostyled https://www.npmjs.com/package/nanostyled (I think this is a React implementation of what the Tailwinds docs call "Extracting Components".)
gedy 8y ago
Nice work Adam, I've grown to really like util based CSS, mainly from the new Bootstrap 4 utility classes. Since your article came out before BS4 release, wondering what your thoughts were on Bootstrap now?
cheapsteak 8y ago
Thanks for making yourself available! I was curious what your thoughts are on a JS-based functional CSS library? I noticed that you mentioned emotion on the docs, and that was also what I thought would be the perfect tool for the job Imagine a set of functions like `textColor()` or `margin()` that return composeable objects that you'd stick onto css props, and just like tailwinds would throw errors or lint warnings if you didn't pass in values it was configured to allow? (E.g., colors.red, okay, colors.maroon, error? Or maybe colors('red') okay) I figured it'd more elegantly solve the problem of generating stylesheets that are too large and then needs to be pruned off One trade-off I see is that the utilities would need to be imported to each file that needs it (as opposed to strings you can put anywhere), but the the good thing about that is you could more easily click into the definitions that way, and you could namespace utilities under a variable so you'd only need to import one thing I would guess you'd put more thought on this topic than I have, very curious to hear what you think
darth_mastah 8y ago
> holy hell this is the worst thing I've ever seen Not really :) It might have been my reaction some 10 years ago, but right now I think it's quite good. I've done BEM, the atomic crap, OOCSS and what have you but to be honest nothing beats composition when it comes to rapid development. I used Bootstrap in the past, it was heavily customised for the project, and I ended up making it look very similar to your approach. It makes sense when you have 20 Devs working on a website and you don't want to end up having separate stylesheet for every page. Because business hates consistent design and always wants this and and that to stand out just on this one page. It should be easy, right? I look at your framework as an embodiment of understanding business driven development in a big team.

rudedogg 8y ago

> "holy hell this is the worst thing I've ever seen" This is so true. All the classes in HTML source look so ugly and verbose when you first see it. At first I dismissed the framework and wondered how someone could think this was a good idea. I kept seeing it pop up, and the comments were always positive, so I put in a little more effort into understanding how it works. Eventually I decided to try it, and within 5 minutes I was making stuff that actually looked nice. I used it to create a really minimal company website, that looks totally custom, and is really lightweight. Thanks for sharing it, I really enjoy using it!

sleepychu 8y ago
The problem I have is: what if I want to (for example) add a style or take it away from all my buttons? It's going to be a lot of manual fiddle, or is the idea that hand written sites are wrong to start with and I should be using generated code?
- makeee 8y ago
  Generally you’d have your button html and classes inside a component so you’re just tweaking that one component.
  - wishinghand 8y ago
    Then it feels like we're just back to writing normal CSS classes.
    - jorgesborges 8y ago
      The real value for me is just being able to sit down and start. The odious first impressions of tailwind are true. But try it out. I like it because I don't waste time flipping back and forth between my document and a style sheet. I don't waste time thinking of clever class names. I don't wait a second to compile css and refresh for every small change I make (even though developer tools have been helpful in this regard, you can only make so many changes at a time). I still break it down into components later but the actual design process is more fluid.
      - wishinghand 8y ago
        I use it in production at work. Wasn't my choice. I should have pushed harder for Bulma. Not only is the HTML just a hair length's away from `style` tags, but if I'm writing the same set of classes on more than 3 elements I compose a component. Then I also have to write our own classes for modals, cards, toasts, lists, media objects, drop down menus, side menus, breadcrumbs, buttons, forms, their labels, images and their captions, and get the right mix of responsive utility classes as well so they all play nice together. I'd rather just pick a framework that lets me customize the corner radii, padding, margins, and be done with it.
    - rvense 8y ago
      Buttons are sort of a pathological example. Most components in a web app are container-like things, with collections of a couple of buttons and other things that need to have a cohesive look, internal and external positioning, etc. And how often do you end up with one large, crufty CSS class for each of those, or a handful that are closely tied to each other and the markup anyway? Frameworks like this allow you to easily move that gunk from the CSS to the HTML.

noir_lord 8y ago

Hi adam, small world (I know you tangentially from the laravel community way back when), as always your documentation is fantastically well done.

artworx 8y ago

Thank you so much for this framework, especially the youtube videos where you rebuild a design using tailwind.

thinkloop 8y ago

This [1] is one of the best articles I've read describing the issues and thought processes around the complexities of structuring css. But the suggested conclusions are exactly where I start to have problems. Take this recommendation for example: .align-left { text-align: left; } This is a very reusable class, of course, because it is literally just css but with a different name. But that's what always ends up happening. The lowest common denominator for reusability in css is so low, that you often end up with ridiculously simple classes like this, or close, basically re-inventing css with a different syntax. The new challenge becomes learning this new language and how to compose it. The core issue with CSS is that it has divergent architectural characteristics simultaneously. On the one hand there are usually a set of extremely re-usable primitives: btn, normal-text, overlay, card, etc. Then very quickly, we get higher-level components/styles that are extremely not re-usable: order-form, contact-page, etc. And other stuff in between. Applying the same structural models to all of it will cause sub-optimality at some level. To address this, I've found that applying different models to different aspects of the css most beneficial. Basically having a mix of both utility css, and semantic css. Low-level, highly re-usable components are defined in a utility fashion so that font-sizes, colors and other things are consistent throughout the site. And complex, non-reusable high-level components that compose primitives, and other custom non-reusable css, to define the top-level components. When the need for sharing common css arises, those can be abstracted out into utility stuff, but part of the goal is to keep the utility part small so that people don't have to learn an entirely new language. [1] https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...

fiddlerwoaroof 8y ago
This is why I like something like sass: your utility classes are all just mixins that you use as needed in your semantic classes.

davepeck 8y ago

Thank you. Your article is one of the most thorough and thoughtful things I've read about this (often frustrating) corner of web development.

deleted 8y ago

[deleted]

tambourine_man 8y ago

What if you need to change justification, image proportions, etc on mobile for instance? Also, from a previous comment of mine: “Problem is, defining quantity in the class name doesn’t work. .m10 may be fine for desktop but not for mobile. Then you’ll have media queries which define .m10 as margin: 5px or something, which is nuts. You could go for unspecified .mSmall etc, but in real life, things tend to be more specific and messier, in my experience.” https://news.ycombinator.com/item?id=18083508 https://news.ycombinator.com/item?id=18083508

mixmastamyk 8y ago
Wouldn't using em units be a better idea in most cases?
- edoceo 8y ago
  CSS has 'vh' and 'vw' units too, changed my life.
  - kaoD 8y ago
    'vmin' and 'vmax' too. I'm experimenting with using 'em' and % everywhere, base font size with 'vmin' and scaling font size with %. Works pretty well for scroll-less apps. Example: https://alvaro-cuesta.github.io/instant-trivia/ https://alvaro-cuesta.github.io/instant-trivia/
    - di4na 8y ago
      Hint : you can also use 'calc' with vw and vh to get some more complex behaviours than purely proportional. You can add an offset, you can do some multiplications etc. Don't go overboard, but a little offset can go a long way
  - tambourine_man 8y ago
    Doesn't solve the problem though. vw, on a vertical screen (portrait mode) is very different from what you have on a ≈ 16:9 desktop screen. The solution is pointed above, even more classes for responsiveness.

baxtr 8y ago

I just wanted to tell you: THANK YOU! I love tailwind. It was a bit of a hustle to get started, but once you're there, there is no way back to bootstrap. Keep up the good work!

chrisfrank 8y ago

Adam, your "Separation of Concerns" article was what sold me on utility-first CSS. Thank you. For anyone building React apps with Tailwind or Tachyons, I just open-sourced a library that makes it easier to reuse CSS classes in standalone, customizable components: https://www.npmjs.com/package/nanostyled https://www.npmjs.com/package/nanostyled (I think this is a React implementation of what the Tailwinds docs call "Extracting Components".)

gedy 8y ago

Nice work Adam, I've grown to really like util based CSS, mainly from the new Bootstrap 4 utility classes. Since your article came out before BS4 release, wondering what your thoughts were on Bootstrap now?

cheapsteak 8y ago

Thanks for making yourself available! I was curious what your thoughts are on a JS-based functional CSS library? I noticed that you mentioned emotion on the docs, and that was also what I thought would be the perfect tool for the job Imagine a set of functions like `textColor()` or `margin()` that return composeable objects that you'd stick onto css props, and just like tailwinds would throw errors or lint warnings if you didn't pass in values it was configured to allow? (E.g., colors.red, okay, colors.maroon, error? Or maybe colors('red') okay) I figured it'd more elegantly solve the problem of generating stylesheets that are too large and then needs to be pruned off One trade-off I see is that the utilities would need to be imported to each file that needs it (as opposed to strings you can put anywhere), but the the good thing about that is you could more easily click into the definitions that way, and you could namespace utilities under a variable so you'd only need to import one thing I would guess you'd put more thought on this topic than I have, very curious to hear what you think

darth_mastah 8y ago

> holy hell this is the worst thing I've ever seen Not really :) It might have been my reaction some 10 years ago, but right now I think it's quite good. I've done BEM, the atomic crap, OOCSS and what have you but to be honest nothing beats composition when it comes to rapid development. I used Bootstrap in the past, it was heavily customised for the project, and I ended up making it look very similar to your approach. It makes sense when you have 20 Devs working on a website and you don't want to end up having separate stylesheet for every page. Because business hates consistent design and always wants this and and that to stand out just on this one page. It should be easy, right? I look at your framework as an embodiment of understanding business driven development in a big team.