33 ms·

Tailwind: A Utility-First CSS Framework

327 points by Ethan_Mick 8y ago

mstg 8y ago
People please don't judge without giving it a try. Just signed up to write that Tailwind truly changed the way I work. Centralized configuration for styles, colors etc. Tailwind is the only CSS framework I use since I discovered it and I'm gradually converting my/company projects to use it.
aarondf 8y ago
I've been using Tailwind for about a year, and it has really put the joy back into using CSS for me. I know that's crazy to say, but I used to always have so much trouble figuring out what to name things and popping back and forth between HTML and CSS. It was super frustrating, and now I can just flyyyy while building out frontend.
pssflops 8y ago
Wow, the letter spacing and intuitive responsive design is very impressive. While I can't quite yet abandon bootstrap, this looks like a great alternative.
giancarlostoro 8y ago
Would be nice to see sample templates of what it all looks like in practice.
- tnorthcutt 8y ago
  https://tailwindcomponents.com/ https://tailwindcomponents.com/
  - giancarlostoro 8y ago
    Thanks! That page has odd behaviors on mobile at least on Android with FireFox. But it looks like the css has clean looking components.
- rverrips 8y ago
  Here is an example site using Tailwind https://novapackages.com https://novapackages.com Some sample code on the doc site itself https://tailwindcss.com/docs/examples/cards/ https://tailwindcss.com/docs/examples/cards/
edhelas 8y ago
I personally have an issue with this "Utility/Functional" CSS pattern. To me I still think that the good old "HTML describe how the content is organized, CSS describe how this content looks like" is the way to go. In the end it's how CSS and HTML were designed at first. But when I see that <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"></div> I'm sorry but it just doesn't feels right to me.
- cimmanom 8y ago
  Yup. Call me old-school, but seeing markup like that makes me wince.
- badestrand 8y ago
  Yes, the problem is that this library just replaced typing <div style="background: white"> with <div class="bg-white"> without realizing that the first is considered a bad practice for a reason and that the second is equivalent.
  - aloisdg 8y ago
    Isn't that basically the same thing as inline styles? Not quite, for a few reasons: Inline styles don't respect media queries, which basically rules out responsive design Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue) Inline styles cause specificity issues, since they trump separate stylesheets. Inline styles don't support print-specific styles. Inline styles can't address pseudo-elements (such as ::before and ::after) Inline styles can't apply to multiple elements. Utility classes can define .bg-blue once and have it apply to many things, which leads to shorter markup and quicker rendering speed. Inline styles are a pain to type. Compare class="f-sm bg-blue" to style="font-size: 10px; background-color: #0000ff;". Utility classes fix all of these things. from https://www.mikecr.it/ramblings/functional-css/ https://www.mikecr.it/ramblings/functional-css/
    - maxxscho 8y ago
      Well summarized! Uitility/Functional CSS > Inline Styles
redonkulus 8y ago
How is tailwind different than Atomic CSS? https://acss.io https://acss.io Small utility classes without writing CSS, seems like the same thing. Disclaimer: I worked with the devs that created it.
- NO_CHANGE 8y ago
  From adamwathan's article, Tailwind's advantage is it limits you to fewer choices. So .text-grey .text-grey-dark .text-grey-darker .text-grey-darkest... rather than coming up with and remembering the hex color values, which might vary between team members.
jasim 8y ago
Tailwind is the best thing that has happened to CSS Frameworks in the last 10 years. * Define the essence of your design in a JSON - typography, colors, spacings, shadows, borders et al. * Anyone in the team including backend developers can create new interface components without waiting on a designer, thanks to well-defined scales that compose well. * The component (HTML+CSS) is the unit of abstraction. eg: "ProfileCard". Inside ProfileCard you'll use Tailwind's utility classes to build your component. You reuse this component everywhere, and if you have to "change a button's padding across the product" (which to me is far too rare) you open your component files and change them there. * It is so easy to build UIs - you don't have to name every single element in the DOM - these names are _only_ to act as "hooks" into the CSS, and serve no abstraction. With Utility classes you can just assemble them in the HTML without touching the CSS * Tailwind has excellent documentation and great conventions - this means between projects all you need to know is their particular scale. Don't have to learn a new UI framework everytime. * Consistency, consistency! Thanks to design scales. * Works so well for custom UIs. Have your designer do absolutely original designs in Sketch, and first transcribe their scales into tailwind.config.js, and voila! start pushing out its HTML at breakneck speed.
- mikewhy 8y ago
  I mean a lot of those things were possible with bootstrap-sass years ago. > Define the essence of your design in a JSON - typography, colors, spacings, shadows, borders et al. _variables.sass > Anyone in the team including backend developers can create new interface components without waiting on a designer, thanks to well-defined scales that compose well. This is true, but is solved by any sort of component system and not unique to tailwind. > The component (HTML+CSS) is the unit of abstraction. eg: "ProfileCard". Inside ProfileCard you'll use Tailwind's utility classes to build your component. You reuse this component everywhere, and if you have to "change a button's padding across the product" (which to me is far too rare) you open your component files and change them there. Why would you change a padding in multiple files when you can set `$base_padding: 10px`? > It is so easy to build UIs - you don't have to name every single element in the DOM - these names are _only_ to act as "hooks" into the CSS, and serve no abstraction. With Utility classes you can just assemble them in the HTML without touching the CSS Going by the first example in the linked article, something like "text-grey-dark" seems like an awful idea when what it really means is "text-quiet". Heck in their example "dark" is _lighter_ than the surrounding text.
JohnH42 8y ago
"bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden" 5 years ago, it should had help some dudes but right now ... choose foundation/bootstrap/materialcss ... or build your own BEMized css ...
sanbor 8y ago
It is convenient but you are not separating markup and presentation. I think the whole point of css is to swap stylesheets and get a different presentation, like demostrated by http://www.csszengarden.com/ http://www.csszengarden.com/ BEM/OOCSS lets you do this.
- joecampo 8y ago
  I highly recommend you read: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
- aarondf 8y ago
  I see this argument as similar to the "what if I want to switch my framework later" or "what if I want to change my database later". I think it's a nice idea, but I'm not sure when you would ever redesign everything _without_ touching the HTML.
- ssijak 8y ago
  How many times you do that in real project? Or have you ever done that in your career? And if a project needs substantial redesign it is usually acompanied by the functionality change, which means you need defferent html/components too, so you still can`t just swap css files.
  - rverrips 8y ago
    +1 on this for "real projects" that actually do use different styles. Our enterprise e-commerce platform uses an internally maintained design system with utility classes only, very similar to tailwindcss. We have 15 different "brands", so simply reference a different "brand" to get it's unique styling, while the utility classes all remain the same.
    - carapace 8y ago
      I think a lot of folks underestimate just how much can be done with this approach. "Steel" http://www.csszengarden.com/219/ http://www.csszengarden.com/219/
fideloper 8y ago
I DEFINITELY recommend trying this out before you decide utility CSS isn't for you. The practical dev workflow of using tailwind is a breath of fresh air. Coming back to old projects with bespoke CSS is SO PAINFUL to edit/change compared to something built in Tailwind. You absolutely also have the power to make css components/abstractions as well.
adamwathan 8y ago
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?
    - 8y ago
interfixus 8y ago
> <div class="bg-white ..."> Are we missing a [1996] in the title?
platz 8y ago
I started a side project with tachyons.io, but it seems i probably should've gone with tailwind. Really i don't need the compile-step, just really wanted to get out of the bootstrap canton
ssijak 8y ago
Btw, nothing is preventing you from combining Tailwind with your other methods of writing CSS. For example you could write CSS Grids for general layout and use Tailwind for styling components.
ricricucit 8y ago
Best css idea in the past years. If you are a complainer: try it first, on a real world project. Only after, you can go on and complain. Really. A complainer.
uhoh-itsmaciek 8y ago
What's the difference between tailwind and tachyons?
- platz 8y ago
  You can generate tachyons from tailwind
  - uhoh-itsmaciek 8y ago
    Okay now I get it. That's neat. I'm using tachyons but this approach is compelling. For what it's worth, I don't think "What is Tailwind?" makes that clear (the "designed to be customized" section hints at it) and I had to read https://tailwindcss.com/docs/configuration https://tailwindcss.com/docs/configuration to understand the difference after reading your comment. Thanks!
blairanderson 8y ago
Hi There, have you tried Tachyons? https://github.com/tachyons-css/tachyons https://github.com/tachyons-css/tachyons Its similar, but has been around since 2015.
- dmix 8y ago
  Also http://basscss.com/ http://basscss.com/ which convinced me of the genius of using this functional/utility approach to CSS. The website themes just seemed so much simpler and minimalist, but also more consistent across the whole site. Significantly reducing the amount of time I need to create my own CSS classes.
flats 8y ago
We switched over from a Bourbon-based SASS framework at my work to Tailwind several months ago & it has been fantastic. I was very negative about it at first - “isn’t this just a crappier version of inline styles?” - but I’m a convert. It’s customizable, it enforces consistency, and it dramatically reduces the amount of CSS you have to write, which is a good thing on several levels. Give it a try.
andrewmcwatters 8y ago
One of the biggest strengths of Bootstrap is that everyone uses Bootstrap. I can come to a company, use Bootstrap, and expect that new employees will also use Bootstrap or that it's already been used there! It's so common in the industry. It also means, for front-end developers like me, that I can create a company theme on Bootstrap, and get junior developers to use it can feel comfortable with being able to implement the brand design language and not have to pixel-fiddle. Not only does this strengthen the technical skillset of my team, but it also helps keep standards high when dealing with offshore resources. We can get them to build UI for entirely separate projects, slap our branding on it, and dramatically cut down on resource allocation, time, and effort. So, here's the thing: this is great, but Bootstrap also has utility classes these days. If I use Tailwind, or Foundation, or Bulma, I immediate lose out on developer leverage. This is so much more powerful than moving some classes around. Approaching all of these design concerns in a slightly different way just isn't powerful enough to outweigh the leverage Bootstrap has over everything else out there. It's just not significantly different enough. It doesn't standout to me. In fact, how it differentiates in its introduction is a _con_ to me. No, the industry doesn't need complete UI kits, design languages vary enough that this could provide additional undesired weight, however people use buttons, drop-downs, and many other common components _all the time_. A major competitor to Bootstrap in the arena would need to do something revolutionary.
- deltron3030 8y ago
  Tailwind isn't really competing against Bootstrap imo, it's an option to keep working the "Boostrap way" once you start fighting the framework and want to create your own instead, or want to preserve working with utility classes for simple custom landing pages. If you need to customize the components a lot you might lose most of the benefits that Bootsrap provides, that's where Tailwind comes in.
- cramer_corey 8y ago
  You make interesting points. For me, as a back-end developer, the prevalence of Bootstrap is a major con because I can't (due to lack of knowledge or confidence, I'm not sure) make a Bootstrap site look like anything other than a Bootstrap site with different colors. Tailwind is the first front-end framework that successfully got me away from that and helped me execute own unique design vision. What seems to come to you easily is a complete struggle for me.
robmerki 8y ago
Please give Tailwind a try before knocking it. The syntax seems strange, but after 15 minutes you'll be in love. It doesn't work for every project, but it's a great tool to have in your arsenal. I've been following Adam and Steve on Twitter for quite some time, and these guys are total pros.
thinkxl 8y ago
I like Tailwind. I think the appeal here is to write less CSS, get things done faster, have a consistent design and the maintainability. All good so far. But let's remind everybody that this is only one approach of many you can use. One approach that can solve problems Tailwind tries to is proper planning. An initial style guide can show you that the `author-bio` component looks similar to `article-preview` (taken from the author's blog post[1]), so you beforehand plan for that HTML and CSS and create a component you can reuse. Of course, you could have decisions made after the fact and go back and change stuff; nothing is bulletproof. - [1] https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
k__ 8y ago
"Separation of concerns" is a straw man So true. That's why CSS-in-JS is awesome. Everything is in one component, nobody cares anymore if you need to edit markup AND styles.
- dsego 8y ago
  Although you lose theming. Unless you provide a way to inherit the component and override the default styles.
maouida 8y ago
Recently I had to do some updates on a UI that used tailwind framework. It was the most unpleasant experience I have ever had. I quickly got eye strain looking at all those attributes. Keep HTML for HTML and CSS for CSS.
albedoa 8y ago
The big thing that Tailwind brings to functional CSS is the emphasis on and mechanisms for composing from utility classes. This is something that went understated in other functional libraries, even though composition has been possible for years using preprocessors. So when people saw Tachyons, for instance, they would recoil at what they saw as an unmaintainable mess even though the underlying theory is sound. I really like the work Adam is doing and where he is leading the conversation. I will read anything he writes, too. He's great at expressing his ideas and rallying you around things you didn't know you care about.
mcgwiz 8y ago
All CSS "frameworks" should be thought of as utility libraries, including Bootstrap. If you apply the framework classes directly to your HTML, you've tightly-coupled your HTML (which is already tightly-coupled to your information architecture) to an implementation detail of your presentation code. Most frameworks support some kind of re-use of CSS declaration blocks - use that feature to build your components from the primitives they provide, but also add a layer of indirection by putting those components behind a semantic class name. Voila, loose-coupling with all the productivity benefits of the frameworks. <button class="login-button">Login</button> .login-button { @apply .btn-primary; } .btn-primary { @apply .font-bold .py-2 .px-4 .rounded; }
- zumu 8y ago
  This is imho the correct approach. All the benefits with none of the coupling. Tailwind might actually be pretty nice if used this way.
benfrain 8y ago
I tried the utility approach many years ago and while I can see the appeal in some situations I think it’s far from a panacea. My journey led to me writing http://ECSS.io http://ECSS.io The opposite way of tackling CSS at scale. Instead of abstraction I opted for isolation.
petemill 8y ago
I do see the 'utility'(!) of this kind of approach to css, but have a main issue on responsiveness. Yes, the solution commonly touted is to define global breakpoints: 'small' 'large', etc. But for me defining those globally is too narrow. Sometimes different groups of components need to respond differently, with context. More worryingly, soon we'll move to 'element' queries, which should suit better than screen-based media queries. We'll be able to say 'when this component is squeezed down to < 500px wide, then wrap the second element underneath the first. That approach is more compatible with modern component architecture. But I don't see a context-specific or even component-specific solution immediately with this framework.
gcb0 8y ago
"it doesn't have a default theme" ...One paragraph later "here's a business card in the default theme" technically, it have all the themes to the point that picking up individual color for everything make it as unmaintanable.
bennofs 8y ago
An important difference in my mind is between designing a web application vs designing a web document. In the document case, it is possible to mostly keep the document semantic and apply styling via CSS. It matches the content/style separation well. For web applications, I really like tailwind-like approaches, for multiple reasons: * changing the style globally is probably hard anyway without adapting the HTML as well (as in the app case, often lots of other things depend on margins etc for example and you have a lot less uniformity/more special cases than in the document case) * because there is less uniformity, the reuse aspect of the traditional content/presentation split is greatly reduced anyway * web apps often use component based frameworks already, so you still get reusable components
jimbo1qaz 8y ago
I can only imagine the lack of semantic classes makes it almost impossible for end-users to reliably restyle the page using Stylus userstyles. I'd say this type of CSS is hurting power users.
deleted 8y ago
[deleted]

327 points by Ethan_Mick 8y ago

mstg 8y ago

People please don't judge without giving it a try. Just signed up to write that Tailwind truly changed the way I work. Centralized configuration for styles, colors etc. Tailwind is the only CSS framework I use since I discovered it and I'm gradually converting my/company projects to use it.

aarondf 8y ago

I've been using Tailwind for about a year, and it has really put the joy back into using CSS for me. I know that's crazy to say, but I used to always have so much trouble figuring out what to name things and popping back and forth between HTML and CSS. It was super frustrating, and now I can just flyyyy while building out frontend.

pssflops 8y ago

Wow, the letter spacing and intuitive responsive design is very impressive. While I can't quite yet abandon bootstrap, this looks like a great alternative.

giancarlostoro 8y ago

Would be nice to see sample templates of what it all looks like in practice.

tnorthcutt 8y ago
https://tailwindcomponents.com/ https://tailwindcomponents.com/
- giancarlostoro 8y ago
  Thanks! That page has odd behaviors on mobile at least on Android with FireFox. But it looks like the css has clean looking components.
rverrips 8y ago
Here is an example site using Tailwind https://novapackages.com https://novapackages.com Some sample code on the doc site itself https://tailwindcss.com/docs/examples/cards/ https://tailwindcss.com/docs/examples/cards/

edhelas 8y ago

I personally have an issue with this "Utility/Functional" CSS pattern. To me I still think that the good old "HTML describe how the content is organized, CSS describe how this content looks like" is the way to go. In the end it's how CSS and HTML were designed at first. But when I see that <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"></div> I'm sorry but it just doesn't feels right to me.

cimmanom 8y ago
Yup. Call me old-school, but seeing markup like that makes me wince.
badestrand 8y ago
Yes, the problem is that this library just replaced typing <div style="background: white"> with <div class="bg-white"> without realizing that the first is considered a bad practice for a reason and that the second is equivalent.
- aloisdg 8y ago
  Isn't that basically the same thing as inline styles? Not quite, for a few reasons: Inline styles don't respect media queries, which basically rules out responsive design Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue) Inline styles cause specificity issues, since they trump separate stylesheets. Inline styles don't support print-specific styles. Inline styles can't address pseudo-elements (such as ::before and ::after) Inline styles can't apply to multiple elements. Utility classes can define .bg-blue once and have it apply to many things, which leads to shorter markup and quicker rendering speed. Inline styles are a pain to type. Compare class="f-sm bg-blue" to style="font-size: 10px; background-color: #0000ff;". Utility classes fix all of these things. from https://www.mikecr.it/ramblings/functional-css/ https://www.mikecr.it/ramblings/functional-css/
  - maxxscho 8y ago
    Well summarized! Uitility/Functional CSS > Inline Styles

redonkulus 8y ago

How is tailwind different than Atomic CSS? https://acss.io https://acss.io Small utility classes without writing CSS, seems like the same thing. Disclaimer: I worked with the devs that created it.

NO_CHANGE 8y ago
From adamwathan's article, Tailwind's advantage is it limits you to fewer choices. So .text-grey .text-grey-dark .text-grey-darker .text-grey-darkest... rather than coming up with and remembering the hex color values, which might vary between team members.

jasim 8y ago

Tailwind is the best thing that has happened to CSS Frameworks in the last 10 years. * Define the essence of your design in a JSON - typography, colors, spacings, shadows, borders et al. * Anyone in the team including backend developers can create new interface components without waiting on a designer, thanks to well-defined scales that compose well. * The component (HTML+CSS) is the unit of abstraction. eg: "ProfileCard". Inside ProfileCard you'll use Tailwind's utility classes to build your component. You reuse this component everywhere, and if you have to "change a button's padding across the product" (which to me is far too rare) you open your component files and change them there. * It is so easy to build UIs - you don't have to name every single element in the DOM - these names are _only_ to act as "hooks" into the CSS, and serve no abstraction. With Utility classes you can just assemble them in the HTML without touching the CSS * Tailwind has excellent documentation and great conventions - this means between projects all you need to know is their particular scale. Don't have to learn a new UI framework everytime. * Consistency, consistency! Thanks to design scales. * Works so well for custom UIs. Have your designer do absolutely original designs in Sketch, and first transcribe their scales into tailwind.config.js, and voila! start pushing out its HTML at breakneck speed.

mikewhy 8y ago
I mean a lot of those things were possible with bootstrap-sass years ago. > Define the essence of your design in a JSON - typography, colors, spacings, shadows, borders et al. _variables.sass > Anyone in the team including backend developers can create new interface components without waiting on a designer, thanks to well-defined scales that compose well. This is true, but is solved by any sort of component system and not unique to tailwind. > The component (HTML+CSS) is the unit of abstraction. eg: "ProfileCard". Inside ProfileCard you'll use Tailwind's utility classes to build your component. You reuse this component everywhere, and if you have to "change a button's padding across the product" (which to me is far too rare) you open your component files and change them there. Why would you change a padding in multiple files when you can set `$base_padding: 10px`? > It is so easy to build UIs - you don't have to name every single element in the DOM - these names are _only_ to act as "hooks" into the CSS, and serve no abstraction. With Utility classes you can just assemble them in the HTML without touching the CSS Going by the first example in the linked article, something like "text-grey-dark" seems like an awful idea when what it really means is "text-quiet". Heck in their example "dark" is _lighter_ than the surrounding text.

JohnH42 8y ago

"bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden" 5 years ago, it should had help some dudes but right now ... choose foundation/bootstrap/materialcss ... or build your own BEMized css ...

sanbor 8y ago

It is convenient but you are not separating markup and presentation. I think the whole point of css is to swap stylesheets and get a different presentation, like demostrated by http://www.csszengarden.com/ http://www.csszengarden.com/ BEM/OOCSS lets you do this.

joecampo 8y ago
I highly recommend you read: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
aarondf 8y ago
I see this argument as similar to the "what if I want to switch my framework later" or "what if I want to change my database later". I think it's a nice idea, but I'm not sure when you would ever redesign everything _without_ touching the HTML.
ssijak 8y ago
How many times you do that in real project? Or have you ever done that in your career? And if a project needs substantial redesign it is usually acompanied by the functionality change, which means you need defferent html/components too, so you still can`t just swap css files.
- rverrips 8y ago
  +1 on this for "real projects" that actually do use different styles. Our enterprise e-commerce platform uses an internally maintained design system with utility classes only, very similar to tailwindcss. We have 15 different "brands", so simply reference a different "brand" to get it's unique styling, while the utility classes all remain the same.
  - carapace 8y ago
    I think a lot of folks underestimate just how much can be done with this approach. "Steel" http://www.csszengarden.com/219/ http://www.csszengarden.com/219/

fideloper 8y ago

I DEFINITELY recommend trying this out before you decide utility CSS isn't for you. The practical dev workflow of using tailwind is a breath of fresh air. Coming back to old projects with bespoke CSS is SO PAINFUL to edit/change compared to something built in Tailwind. You absolutely also have the power to make css components/abstractions as well.

adamwathan 8y ago

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?
  - 8y ago

interfixus 8y ago

> <div class="bg-white ..."> Are we missing a [1996] in the title?

platz 8y ago

I started a side project with tachyons.io, but it seems i probably should've gone with tailwind. Really i don't need the compile-step, just really wanted to get out of the bootstrap canton

ssijak 8y ago

Btw, nothing is preventing you from combining Tailwind with your other methods of writing CSS. For example you could write CSS Grids for general layout and use Tailwind for styling components.

ricricucit 8y ago

Best css idea in the past years. If you are a complainer: try it first, on a real world project. Only after, you can go on and complain. Really. A complainer.

uhoh-itsmaciek 8y ago

What's the difference between tailwind and tachyons?

platz 8y ago
You can generate tachyons from tailwind
- uhoh-itsmaciek 8y ago
  Okay now I get it. That's neat. I'm using tachyons but this approach is compelling. For what it's worth, I don't think "What is Tailwind?" makes that clear (the "designed to be customized" section hints at it) and I had to read https://tailwindcss.com/docs/configuration https://tailwindcss.com/docs/configuration to understand the difference after reading your comment. Thanks!

blairanderson 8y ago

Hi There, have you tried Tachyons? https://github.com/tachyons-css/tachyons https://github.com/tachyons-css/tachyons Its similar, but has been around since 2015.

dmix 8y ago
Also http://basscss.com/ http://basscss.com/ which convinced me of the genius of using this functional/utility approach to CSS. The website themes just seemed so much simpler and minimalist, but also more consistent across the whole site. Significantly reducing the amount of time I need to create my own CSS classes.

flats 8y ago

We switched over from a Bourbon-based SASS framework at my work to Tailwind several months ago & it has been fantastic. I was very negative about it at first - “isn’t this just a crappier version of inline styles?” - but I’m a convert. It’s customizable, it enforces consistency, and it dramatically reduces the amount of CSS you have to write, which is a good thing on several levels. Give it a try.

andrewmcwatters 8y ago

One of the biggest strengths of Bootstrap is that everyone uses Bootstrap. I can come to a company, use Bootstrap, and expect that new employees will also use Bootstrap or that it's already been used there! It's so common in the industry. It also means, for front-end developers like me, that I can create a company theme on Bootstrap, and get junior developers to use it can feel comfortable with being able to implement the brand design language and not have to pixel-fiddle. Not only does this strengthen the technical skillset of my team, but it also helps keep standards high when dealing with offshore resources. We can get them to build UI for entirely separate projects, slap our branding on it, and dramatically cut down on resource allocation, time, and effort. So, here's the thing: this is great, but Bootstrap also has utility classes these days. If I use Tailwind, or Foundation, or Bulma, I immediate lose out on developer leverage. This is so much more powerful than moving some classes around. Approaching all of these design concerns in a slightly different way just isn't powerful enough to outweigh the leverage Bootstrap has over everything else out there. It's just not significantly different enough. It doesn't standout to me. In fact, how it differentiates in its introduction is a _con_ to me. No, the industry doesn't need complete UI kits, design languages vary enough that this could provide additional undesired weight, however people use buttons, drop-downs, and many other common components _all the time_. A major competitor to Bootstrap in the arena would need to do something revolutionary.

deltron3030 8y ago
Tailwind isn't really competing against Bootstrap imo, it's an option to keep working the "Boostrap way" once you start fighting the framework and want to create your own instead, or want to preserve working with utility classes for simple custom landing pages. If you need to customize the components a lot you might lose most of the benefits that Bootsrap provides, that's where Tailwind comes in.
cramer_corey 8y ago
You make interesting points. For me, as a back-end developer, the prevalence of Bootstrap is a major con because I can't (due to lack of knowledge or confidence, I'm not sure) make a Bootstrap site look like anything other than a Bootstrap site with different colors. Tailwind is the first front-end framework that successfully got me away from that and helped me execute own unique design vision. What seems to come to you easily is a complete struggle for me.

robmerki 8y ago

Please give Tailwind a try before knocking it. The syntax seems strange, but after 15 minutes you'll be in love. It doesn't work for every project, but it's a great tool to have in your arsenal. I've been following Adam and Steve on Twitter for quite some time, and these guys are total pros.

thinkxl 8y ago

I like Tailwind. I think the appeal here is to write less CSS, get things done faster, have a consistent design and the maintainability. All good so far. But let's remind everybody that this is only one approach of many you can use. One approach that can solve problems Tailwind tries to is proper planning. An initial style guide can show you that the `author-bio` component looks similar to `article-preview` (taken from the author's blog post[1]), so you beforehand plan for that HTML and CSS and create a component you can reuse. Of course, you could have decisions made after the fact and go back and change stuff; nothing is bulletproof. - [1] https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...

k__ 8y ago

"Separation of concerns" is a straw man So true. That's why CSS-in-JS is awesome. Everything is in one component, nobody cares anymore if you need to edit markup AND styles.

dsego 8y ago
Although you lose theming. Unless you provide a way to inherit the component and override the default styles.

maouida 8y ago

Recently I had to do some updates on a UI that used tailwind framework. It was the most unpleasant experience I have ever had. I quickly got eye strain looking at all those attributes. Keep HTML for HTML and CSS for CSS.

albedoa 8y ago

The big thing that Tailwind brings to functional CSS is the emphasis on and mechanisms for composing from utility classes. This is something that went understated in other functional libraries, even though composition has been possible for years using preprocessors. So when people saw Tachyons, for instance, they would recoil at what they saw as an unmaintainable mess even though the underlying theory is sound. I really like the work Adam is doing and where he is leading the conversation. I will read anything he writes, too. He's great at expressing his ideas and rallying you around things you didn't know you care about.

mcgwiz 8y ago

All CSS "frameworks" should be thought of as utility libraries, including Bootstrap. If you apply the framework classes directly to your HTML, you've tightly-coupled your HTML (which is already tightly-coupled to your information architecture) to an implementation detail of your presentation code. Most frameworks support some kind of re-use of CSS declaration blocks - use that feature to build your components from the primitives they provide, but also add a layer of indirection by putting those components behind a semantic class name. Voila, loose-coupling with all the productivity benefits of the frameworks. <button class="login-button">Login</button> .login-button { @apply .btn-primary; } .btn-primary { @apply .font-bold .py-2 .px-4 .rounded; }

zumu 8y ago
This is imho the correct approach. All the benefits with none of the coupling. Tailwind might actually be pretty nice if used this way.

benfrain 8y ago

I tried the utility approach many years ago and while I can see the appeal in some situations I think it’s far from a panacea. My journey led to me writing http://ECSS.io http://ECSS.io The opposite way of tackling CSS at scale. Instead of abstraction I opted for isolation.

petemill 8y ago

I do see the 'utility'(!) of this kind of approach to css, but have a main issue on responsiveness. Yes, the solution commonly touted is to define global breakpoints: 'small' 'large', etc. But for me defining those globally is too narrow. Sometimes different groups of components need to respond differently, with context. More worryingly, soon we'll move to 'element' queries, which should suit better than screen-based media queries. We'll be able to say 'when this component is squeezed down to < 500px wide, then wrap the second element underneath the first. That approach is more compatible with modern component architecture. But I don't see a context-specific or even component-specific solution immediately with this framework.

gcb0 8y ago

"it doesn't have a default theme" ...One paragraph later "here's a business card in the default theme" technically, it have all the themes to the point that picking up individual color for everything make it as unmaintanable.

bennofs 8y ago

An important difference in my mind is between designing a web application vs designing a web document. In the document case, it is possible to mostly keep the document semantic and apply styling via CSS. It matches the content/style separation well. For web applications, I really like tailwind-like approaches, for multiple reasons: * changing the style globally is probably hard anyway without adapting the HTML as well (as in the app case, often lots of other things depend on margins etc for example and you have a lot less uniformity/more special cases than in the document case) * because there is less uniformity, the reuse aspect of the traditional content/presentation split is greatly reduced anyway * web apps often use component based frameworks already, so you still get reusable components

jimbo1qaz 8y ago

I can only imagine the lack of semantic classes makes it almost impossible for end-users to reliably restyle the page using Stylus userstyles. I'd say this type of CSS is hurting power users.

deleted 8y ago

[deleted]