Tailwind CSS is a Utility-First CSS Framework for Rapid UI Development ⚡️
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.Pros:
It make CSS simpleCons:
The only con I know is that it’s still pre 1.0
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/2882...
If Tailwind has Sass support, it would definitely be very useful.Pros:
Less opinionated that Bootstrap, provides more flexibilityCons:
Binds you to the framework, not semantic
I've been utilising Tailwind in 2 mid-size projects for 4 months now.
I adopted forms and buttons styles from Bootstrap 4 and... so far so good.
It's also very handy to extend the default preset of Tailwind.
Afterwards it feels so unproductive to write plain CSS for my former projects.Pros:
Your best choice if you are designing your screens and coding them simultaneously and aloneCons:
Sometimes your templates look a bit messy, but that's fine since you have no stylesheet files which are usually messy anyway