DEV Community

Discussion on: What are your thoughts on Tailwind CSS?

Collapse
 
deciduously profile image
Ben Lovy • Edited

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.

Collapse
 
uminer profile image
Moshe Uminer • Edited

Hi Ben, I also took that approach before, and while it isn't the recommended way to use tailwind, you do still get one of the big benefits: a range of presets. It means that you won't start tweaking every color and margin that you add, unless you decide it really is necessary (see my comment above). As you mentioned with flex spacing, for example.

Collapse
 
deciduously profile image
Ben Lovy

You're right, I don't think I'd fully realized exactly how much of a help the presets really are. I've skipped a lot of work by using Tailwind to get my page to the point it's currently at, and didn't even notice because it was so easy to do but still felt as granular as doing it manually.