I've really seen Tailwinds take off lately in "marketshare" as well as "love-share".
On the other hand, the CSS ecosystem has been in mayhem for years...
Article No Longer Available
I find the Tailwinds utility-first approach to be a really pleasant way to work with CSS, and CSS and pleasant are rarely used together in a sentence.
...But we've been here before in so many ways. I'd love to get folks' opinions on the CSS space.
Latest comments (60)
I'm not sold on Tailwind tbh. I also see classless css approaches too, meh.
I've been trying Tailwind for a while now and in most cases it's quite nice.
It's quite quick to do basic layouts etc... but...
It doesn't replace CSS, as mentioned elsewhere. So you still have to rely on "normal" css to get the other details sorted out.
Now the problem I find with this approach is that now there's css in the html and in the css sections of the components Plus css in the global css files.... aaargh
It's very fast for solo building, but I have my doubts for long term maintenance, especially in a team.
If you don't use a some sort of component based approach, when you need to change the padding of every type of card, you're good to find them all by hand.
Even if you do code in components, some might be different but inherits common properties—cards padding still is the good candidate. Then again, you are good to find them all by hand, with no guarantee that everything with
px-4is a card.And when coding components with scoped styles (Vue/Svelte…), I hardly use classes at all anyways, even utilities. Selectors are most often tags or ids. Values are either obvious, either some gobal variables.
Now the problem of coding in component has been known for years and is mostly tackled since bootstrap popularized it—altough… surprises. The problem of overall coherence and DRYness is solved with global settings and global classes as popularized by… yeah Boostrap.
I actually often end up rebuilding my little Boostrap from the bottom up everytime. First, do things in components with stupid selectors. Then, whenever you feel you are repeating yourself (colors, spacing, global class…) create a global class or variable. And voilà. It's just as fast, but much more guaranted to be coherent. I guess that makes me in the Sass camp?
Last one for the road: one more config file!🎉 _package.json, eslintrc, webpackconfilg, nuxtconfig, now/firebase _… and now tailwindconfig with it's very own fleet of arrays. Who said convention ? 😇
I have gone through all the phases, I started with my own styles with CSS, I went through LESS, I tried with Bootstrap 3 and 4, then I moved to SASS to be able to create the class libraries in the companies I worked with and I stayed there. A new design would come and I would layout and add my named classes in BEM.
And suddenly, PAM, utility-first and I said 'wow, this is not going to be better than my own styles' and I start reading and discover that what I added in the inspector as property-value to add to my SASS class, now it's a class I can add in my HTML and the magic is done.
Honestly, I understand that there are projects that don't fit with this technology for x reasons, but my productivity has increased a minimum of 75% since I use TaiwanindCSS, I just can't love them more 😍
my two cents:
I think the vocabulary in tailwind is quite extensive. So that a higher entry barrier than e.g. with bootstrap (the css only part of bootstrap). However, for very common and straight forward websites that might fit perfectly it's place. In enterprise applications very often you end up writing pretty custom css, where the tailwind approach would be totally counter practicable.
Also personally I'd like to keep my markup clean, but with tailwind I'm ending up with 'polluted' markup where the styles detail are basically everywhere. So shuffling around the layout e.g. with css themes, without markup changes, becomes pretty hard.
Its a big step forward for performance freaks. Styles can be XX times smaller than originally and the risk of unused css/bloat is heavily minimized.
Also, its a good opportunity to get rid off weird dependencies like sass, in favor of postcss plugins.
At least that was the case for our documentation site. It was a pleasure to migrate to.
When you write a custom class, do you use a single custom class and use
@applyto apply all the tailwind styles? Or do you only write the custom styles and keep the other classes?And what's the naming convention for these custom classes?
Just another thing. Get your responsive class names out of my HTML! If you have to declare your template with metadata, fine this could be an alright approach, but otherwise keep all responsiveness in CSS. The mental model to understand how Tailwind class names effect styling is too difficult, especially when they are chained. It is not difficult to wrangle media queries. All the bloat to the HTML will add up in complex layouts.
My favorite CSS framework of all time is bourbon. Bourbon was just another thing too. Bourbon is just a bunch of utility SCSS mixins, which abstracted our CSS nicely and meant we didn’t have to reinvent the wheel for most things. Progress has made Bourbon somewhat obsolete over time. I’d like to see more of that: preprocessor frameworks coming up with abstractions around common tasks.
My personal theory is that Tailwind is a joke that nobody really caught.
A few arguments:
classinstead of<style>well so be it but you're still writing it.class?I'll sum this up that way: if you can't document it, why even bother using it?
Tailwind is more than a joke. It's a terrible joke.
I don't use Tailwind but I understand the appeal. Many people can create something that looks nice without needing to know heaps of CSS. That's very powerful. But it comes with its drawbacks. For me, the biggest one is the abstraction.
Personally, I'm comfortable with CSS and I would prefer to write it myself. It's going to be around forever, so I might as well master it 🙂