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!)<p>You really do have to try it to shake that impression.<p>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:<p><a href="https://adamwathan.me/css-utility-classes-and-separation-of-concerns/" rel="nofollow">https://adamwathan.me/css-utility-classes-and-separation-of-...</a><p>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:<p><a href="https://www.youtube.com/watch?v=_JhTaENzfZQ" rel="nofollow">https://www.youtube.com/watch?v=_JhTaENzfZQ</a><p>...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:<p><a href="http://www.fullstackradio.com/75" rel="nofollow">http://www.fullstackradio.com/75</a><p>If you have any questions I'll be checking the comments, thanks!
Tailwind is the best thing that has happened to CSS Frameworks in the last 10 years.<p>* Define the essence of your design in a JSON - typography, colors, spacings, shadows, borders et al.<p>* 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.<p>* 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.<p>* 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<p>* 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.<p>* Consistency, consistency! Thanks to design scales.<p>* 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.
I personally have an issue with this "Utility/Functional" CSS pattern.<p>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.<p>But when I see that<p><pre><code> <div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"></div>
</code></pre>
I'm sorry but it just doesn't feels right to me.
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.<p>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.<p><pre><code> <button class="login-button">Login</button>
.login-button { @apply .btn-primary; }
.btn-primary { @apply .font-bold .py-2 .px-4 .rounded; }</code></pre>
I DEFINITELY recommend trying this out before you decide utility CSS isn't for you.<p>The practical dev workflow of using tailwind is a breath of fresh air.<p>Coming back to old projects with bespoke CSS is SO PAINFUL to edit/change compared to something built in Tailwind.<p>You absolutely also have the power to make css components/abstractions as well.
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.<p>Tailwind is the only CSS framework I use since I discovered it and I'm gradually converting my/company projects to use it.
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 <a href="http://ECSS.io" rel="nofollow">http://ECSS.io</a>
The opposite way of tackling CSS at scale. Instead of abstraction I opted for isolation.
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.<p>Keep HTML for HTML and CSS for CSS.
Hi There, have you tried Tachyons?<p><a href="https://github.com/tachyons-css/tachyons" rel="nofollow">https://github.com/tachyons-css/tachyons</a><p>Its similar, but has been around since 2015.
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 <a href="http://www.csszengarden.com/" rel="nofollow">http://www.csszengarden.com/</a> BEM/OOCSS lets you do this.
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.
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.<p>But let's remind everybody that this is only one approach of many you can use.<p>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.<p>Of course, you could have decisions made after the fact and go back and change stuff; nothing is bulletproof.<p>- [1] <a href="https://adamwathan.me/css-utility-classes-and-separation-of-concerns/" rel="nofollow">https://adamwathan.me/css-utility-classes-and-separation-of-...</a>
An important difference in my mind is between designing a web application vs designing a web document.<p>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.<p>For web applications, I really like tailwind-like approaches, for multiple reasons:<p>* 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)<p>* because there is less uniformity, the reuse aspect of the traditional content/presentation split is greatly reduced anyway<p>* web apps often use component based frameworks already, so you still get reusable components
The big thing that Tailwind brings to functional CSS is the emphasis on and mechanisms for composing from utility classes.<p>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.<p>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.
How is tailwind different than Atomic CSS? <a href="https://acss.io" rel="nofollow">https://acss.io</a><p>Small utility classes without writing CSS, seems like the same thing.<p>Disclaimer: I worked with the devs that created it.
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.
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.
<i>"Separation of concerns" is a straw man</i><p>So true.<p>That's why CSS-in-JS is awesome.<p>Everything is in one component, nobody cares anymore if you need to edit markup AND styles.
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 <i>so</i> 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.
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.
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.
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.
I started a side project with tachyons.io, but it seems i probably should've gone with tailwind.<p>Really i don't need the compile-step, just really wanted to get out of the bootstrap canton
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.<p>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.<p>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.<p>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.<p>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.<p>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_.<p>A major competitor to Bootstrap in the arena would need to do something revolutionary.
"it doesn't have a default theme" ...One paragraph later "here's a business card in the default theme"<p>technically, it have all the themes to the point that picking up individual color for everything make it as unmaintanable.
"bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"<p>5 years ago, it should had help some dudes but right now ... choose foundation/bootstrap/materialcss ... or build your own BEMized css ...