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.