Tailwind CSS
p/tailwind-css
A utility-first CSS framework for rapid UI development
Adam Wathan
Tailwind CSS v1.0 — A utility-first CSS framework for building custom designs.
Featured
83
Most frameworks make it really hard to build custom designs, but Tailwind is different. Instead of predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.
Replies
tom meagher
@adamwathan big fan! who do you think can benefit most from the new release? what’s your favorite part about v1?
Adam Wathan
Top Product
Maker
@tomfme Thanks Tom! I think the most exciting part about releasing a v1 is that hopefully it will get Tailwind into the hands of more people who aren't comfortable being bleeding edge early adopters. With any luck the fact that it doesn't have that "alpha" label attached anymore means a lot more people will use it for their projects. My favorite part about v1 is that it's released and I can sleep at night again 😅 Seriously though I like the new config file approach a lot.
Shawn Hansen
Anyone know why this is sitting at #2 on today's list, even though it has more upvotes?
Yann
@geekles ph algorithm works in mysterious ways. You might find some explanation here: https://medium.com/@RossCurrie/a...
Devin Rajaram
Loved following along this development on Twitter haha Congrats on the launch 🎉
Patrick Smith

Tailwind is battle tested. Making responsive designs is really nice, more powerful than Bootstrap 4’s grid. Focus and hover styles are simple. Encourages you to reuse CSS instead of writing new code and think about what elements can be consistent. Works with server-side rendering easily. Performant. Compresses well.

Pros:

Thoughtfully made, suitable for a wide range of projects, battle tested

Cons:

TypeScript support?

Adam Wathan
Top Product
Maker
👋🏻 Hey folks! About a year and a half ago we launched the first 0.x version of Tailwind CSS and today we're finally releasing v1. Let me know what you think and if you have any questions I'll do my best to answer!
Lee Overy
@adamwathan congrats man. Been using it since the beginning. Love it and won’t ever go back to naming stuff. I do not miss having to come up with random names and triggering my ocd when it’s not perfect!
Jakub Arbet
@adamwathan thanks for the amazing job. Loved especially how you involved the community in the making 👍✨
Daniel Matthews

I've been using this since the earliest versions, it's changed the way i write CSS on projects and it's currently shipped on 10+ of my client projects.

Pros:

Fast, great for building custom UIs quickly. Fantastic documentation. Great community.

Cons:

May inspire teen levels of angst in those opposed to component based CSS.

Christoph Rumpel

I've been using it now for like a year and love how fast I can write CSS and style but still following a plan which is in my configuration file.

Pros:

It's fast, it's easy, it's still CSS and comes with a great configuration file. don't mistake it for normal inline styles. It is much more!

Cons:

It takes some time to FEEL the difference, you need to rethink your workflow

Martin Betz
Lots of reasons why Tailwind CSS is a perfect web design companion: - It is so much more flexible than frameworks like Bootstrap and Bulma - It's the most direct connection between "This is what I think it should look like" and implementing it in HTML with class names that are easy to remember - It is perfect for total beginners and pros alike - It is very well documented (lots of examples and ways how to tweak it) - There is an active community with loads of hands-on tutorials, plugins and tools
Pedro Rio

It's great, I don't think I would choose any other CSS framework right now

Pros:

Maintaining the CSS of an app is much simpler with Tailwind

Cons:

Templates do get verbose, but I don't see any other way

Peter Suhm

I ❤️ Tailwind

Pros:

Tailwind is life

Cons:

CSS sucks

Michael

I was very skeptical in using a utility framework because I didn’t like the idea of “styling in html”. But after on some unmaintainable projects due to massive CSS files, Tailwind has proven to be the perfect solution. Won’t work on projects without Tailwind anymore.

Pros:

Quick to learn. Easy to implement. Major speed increase in workflow.

Cons:

Can’t think of any.

Ricardo Macario
Hey @adamwathan thank you for building Tailwind. I'm in love with it. I've always hated having to overwrite classes to customize Bootstrap and other frameworks. Also, not having to come up with class names is HUGE for productivity. No more inner-inner__container-child.
Yann
Been using it in several products already. I really really don't want to go back to Bootstrap anymore after having used tailwind. There's so much thought put into this that takes a lot of work off my plate. Especially the work on color is amazing. Thank you!
Vieko Franetovic

this is by far my favourite utility framework. I use it for 90% of my projects and that other 10% is slowly being migrated. Well done Adam and thank you for sharing.

Pros:

well defined language, lightweight, great documentation, extensible

Cons:

nothing comes to mind

james anelay

In recent years i've started to dread having to dig into a massive bootstrap sass file structure to make simple updates. Not it's a dream. I like to write html/css again.

Pros:

- I now spend 0 time thinking about what to name a new css class. - When i do need to name something it's for a reason.

Cons:

- Convincing colleagues that this should be the default rather than bootstrap is hard.

Mario Rodriguez
Styling with TailwindCSS is a delight. Thank you for working on it, and congrats on the launch!
Caleb Smith

I went all in on using Tailwind as the backbone of my companies UI Kit as soon as the Beta1 came out - I have had no regrets. As a Vue developer, it has really streamlined my processes while eliminating some "clutter classes" that I never used with Bootstrap. The classes are very readable and the use of Pseudo-classes are amazing. You will not be disappointed by making the switch over to Tailwind for your future projects.

Pros:

Easy to use, classes are common sense and closely aligned with some Bootstrap classes, and a nice clean slate for barebones projects.

Cons:

This is not a UI kit. This is not a 1:1 Bootstrap replacement. This can be a con, depending on who you are.

James Blair
Huge fan and user of Tailwind. We we're in the middle of building our own front-end framework when I read @adamwathan thoughts on the 5 phases of CSS utility -- I was probably in phase 3 at the time -- and his perspective just made so much sense. kinda just clicked. Anyways, abandoned our framework efforts and jumped in to use tailwind and I can easily say it has cut my front end dev time in half, and given me lots of confidence to maintain projects in the future. Highly recommend

Tailwind is a fully functional CSS toolkit that you can use out of the box and easily extend to work seamlessly for any project.

Pros:

Tailwind is easy to get up and running, is built on utility classes, and allows you to quickly spin up custom components.

Cons:

Utility class nomenclature is quite different from Basscss and Tachyons and can take some getting used it.

Justin Jackson

Move over Bootstrap, Tailwind is in town.

Pros:

The pre-built components are incredible!

Cons:

Can't think of any