Tailwind CSS

A utility-first CSS framework for rapid UI development

4.7/5
About

Tailwind CSS is a Utility-First CSS Framework for Rapid UI Development ⚡️

Would you recommend this product?
Partner & Technical Director, Tighten

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 simple

Cons:

The only con I know is that it’s still pre 1.0

Share
Fullstack JavaScript Developer

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 flexibility

Cons:

Binds you to the framework, not semantic

Share
UI Designer
Adam made a screencast were he demoed using Tailwind. There's one part where he talks about creating components, and I think it's similar to the solution you linked to in Stack Overflow. Here's a link where he starts extracting some of the utility classes into component classes: https://youtu.be/ZrRRMBaz5Z0?t=4...
Software Engineer. Built CATCHTRIPS.
@d4nyll Can you give an explicit example where this (or Bootstrap) will be tougher to move to a different framework? I'm trying to understand.
⚡️ transistor.fm

I can't wait to use this in more projects. The cards look especially good:

https://tailwindcss.com/docs/exa...

Pros:

Amazing documentation!

Cons:

They're just getting started.

Share

I'd like to be able to change some class prefixes to be clearer for myself, but in a whole, tailwind is great.

Pros:

Makes CSS simpler and cleaner

Cons:

Not fully customisable yet for class names.

PHP Enthusiast

I <3 Tailwind

Pros:

It´s made by the Laravel Community

Cons:

Nothing. Really.

Engineer by genes

Looking forward to using it in my projects.

Pros:

The Utility first approach is second to none. You can whip a really nice style in no time.

Cons:

In it's early stage of development and missing support for utilities like gradient. Not really a con.

Web App Writer

I - as a mostly back-end developer - have found easy, understandable, natural and fun way to design my front-end with tailwind. It's just the beginning but I'll definitely use this in my next projects.

Pros:

Better way to use CSS

Cons:

It's just in alpha stage

Indie developer making business apps

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 alone

Cons:

Sometimes your templates look a bit messy, but that's fine since you have no stylesheet files which are usually messy anyway