What are your thoughts on Tailwind CSS?

It's great we used it before we went into making Shopify apps. But sometimes things like purge CSS and using React components as a way to reuse logic makes me things we need really need a framework that just makes a 10 character CSS property into 2 i.e flex instead of {{ display: flex}}

I'm a big fan of tailwind. In my eyes, the biggest advantage is the fact that there is a range of preset values for everything.

Let's take coloring for an example. Using tailwind you don't need to figure out a complete color palette beforehand, because tailwind will come with 9 shades of every color. And if you don't like the exact color, you can change the configuration. The same is with margins, instead of fretting over the distance, just use a preset. Which margin preset looks better? Take it. And it is so with all of tailwind's classes.

I should note, that tailwind is best used with a component framework, because you definitely don't want to right the same 10 classes 3 times. The framework can take care of the repetition for you.

By the way, the tailwind website had some screencasts for design using tailwind.

You haven't mentioned why you find tailwind overwhelming, but I will guess that it feels like there are simply too many classes to keep track of. I had a similar problem, but downloading the tailwind plugin for vscode gives me code completion. So now I just need to remember that all margin classes start with m-, for example, and the plugin shows all possible classes and their values.

Impressive, got a lot of traction in the last few months.

I'm using it for the first time currently to style my Stencil app.

I think I like it, but I'm also not sure if I'm missing the point. To use it with Stencil, I'm still keeping separate CSS files and applying these template classes manually:

.subtitle {
  @apply italic;
}

.name {
  @apply text-2xl font-extrabold;
}

.cv-links {
  @apply flex mb-4;
}

So, while the built-in utility classes are handy, in a lot of cases I think I could probably be doing just fine without Tailwind. This is kinda like how I'd write up plain CSS anyway. The one big thing I like is the flex spacing - it's pretty easy to tweak and play with to get what you need:

.cv-section {
  @apply flex mb-4;
}

.cv-heading-section {
  @apply w-1/3 px-2;
}

.cv-body-section {
  @apply w-1/2 px-2;
}

.homeaddress {
  @apply float-right;
}

I have definitely not spent enough time defining my utility classes and have repeated segments in a few spots across different components, that might push me more thoroughly to the "pro" camp once I get around to it. It is super intuitive and easy to use, though, I like how quickly I can throw a new idea on my page without diving through a search engine rabbit hole. The docs right on the main page have covered every question I've had so far. I generally dislike CSS and building frontend styling, it's a necessary evil from my perspective, so the frictionless experience is pretty great.

It appeals to me by providing the benefits of a pre-styled library while still allowing you to create a custom design. The downside is that the design still needs to be created by the developer. Not all developers are detail-oriented when it comes to the front-end, so I could see it being a challenge for some. I have also seen many cases where Bootstrap users do not apply classes/markup correctly leading to elements that do not look as the maintainers intended, so Tailwind's added complexity with applying classes may lead to some designs that are not as polished.

They are also working on Tailwind UI, which I believe will be a paid set of templates created using Tailwind. I think that will help to bridge the gap with the other Bootstrap-like frameworks but I'm not sure if they are providing any parts of it for free. Last I heard, they are expecting to release it in February.

While i like the idea after trying it (first i was like omg so much classes!?) i am not sure i will use it for something production wise.. I have my doubts about the css file size after purging everything not used vs writing my own css for big websites.. And unfortunately i don't have the time to port one of our bigger client websites to tailwind just for fun and actually compare the file size :)

Hey 👋 thanks for asking 😃

I'm a massive fan of having a set of values already sorted out for me. As a developer/product maker, we should always aim for repeatability. And you get that with Tailwind as it shrinks down the number you get to choose from:

• only a subset of colors instead of the whole color spectrum
• responsive breakdowns instead of the ones that you've just looked up on google
• margins and paddings instead of every possible value in the integer set

All of this is configurable, so you get to keep the limited subset with the values that are harmonious with the design.

I hope this helps 🙇‍♂️

I tried so hard to make it work, but I felt I was doing the same amount of work but I've just shifted the work someplace else.

I think people are just better off making a handful of utility classes and scoping css per page/component.

I totally like Tailwind. The fact that it's not just another CSS framework but is a utility-based framework is great! 💯

I wrote an article dedicated to my first-time use of Tailwind, here's a snippet:

What sets apart Tailwind is that instead of some predesigned components, it provides low-level utility classes that we can use to completely customize it!

Of course, it's fairly new as compared to other CSS frameworks like Bulma, Bootstrap or Materialize, but I'm sure in coming years it'll boom. I like the fact that new features are added every now and then to this with good community support.

I've written a few articles now about Tailwind and how much I like it. Tailwind works best when used with a component/partials system and I pretty much would consider it a requirement at this point.

One of my favorite parts of Tailwind is the limitations it imposes on your choice by using a constrained set of options. Consistency is hard and limiting your options to a small subset makes managing choice easy.

I really like using it on my personal blog and I really like the fact that is less than <5kb gziped.

Big fan. It takes a few hours to get use too it.

But it speeds up Development a lot. The defaults are pretty nice, and easy to change.

We moved our entire frontend too it. I love putti by everything in html, even though it makes the markup slightly ugly. I am looking forward to pairing this with Alpine Js in the future.

Huge fan. I was using Bulma for all my project and while that is still a great choice I find that Tailwind is a better fit for me. I can make something that looks half decent with it so that has to be worth something!

I was a little put off by Tailwind when I first looked at the examples in the documentation.

Why would I put all these classes in my HTML? Why wouldn't I just use Sass mixins?

But I decided to give it a shot, and oh man am I glad I did.

Once you start seeing patterns and memorizing the basic utility classes, it becomes an absolute breeze to style any component or section of your page might have.

I found it especially great for using flexbox, simply specifying flex and flex-1, flex-grow, flex-shrink, etc.

And the configuration and adding custom classes is very simple and intuitive once you learn it, which doesn't take long at all.

Again, it does seem off-putting at first, but as the docs themselves say,

You just have to try it.

Adam Wathan, the maintainer of TailwindCSS, wrote an article a couple years ago about the differences in CSS architecture that exist between traditional approaches (BEM, SMACSS) and atomic/utility approaches.

Here's that article: adamwathan.me/css-utility-classes-...

I recommend everyone read it.

Adam doesn't declare that one approach is bad and another is good. Instead he provides insight into what the constraints are of each and what use-cases each might be good for.

In the end he argues that most of the sites/apps he works on benefit from the approach provided by TailwindCSS and other similar libraries (Bulma, Tachyons, even Bootstrap's utility classes).

I think understanding why we should use TailwindCSS is as important (or more) as asking the question "does Tailwind make me more productive?"

And yes, I like TailwindCSS because it fits the type of work that I find myself regularly doing.

I like it.

In a new project its a no brainer (especially for those performance oriented).

Im slowly growing to rewrite my companys docs site from bootstrap+custom css to tailwind. This will be interesting experience.