Discussion on: TailwindCSS: Adds complexity, does nothing.

[Kerry Boyko]

First of, don't use apply. Don't. I'd deny any pull request using @apply. Horrible feature. Yuck.

I agree. Not that I don't think you shouldn't bundle related CSS properties together into reusable classes, but that the whole point of Tailwind is to avoid that type of composition altogether. I may not agree with Tailwind's philosophy, but I don't mind pointing out as part of it's criticism when it's being philosophically inconsistant.

You can ignore all extra work of making sure all your devs in your team use the same kind of class-namings. To BEM or not to BEM, all these decisions go out the window, reducing extra time needed in planning that is better used to actually get to work.

Weirdly, "making sure all devs use the same class namings" is not really a concern that I have. I mean sure, it's a good thing to aim for, but it's only really a "must have" if you're using an unscoped global .css file for styling. Most of the work I've done has been in Vue or React; which means I'm either using Vue's <style lang="scss" scoped>, CSS Modules: "import 'myComponentStyle.scss", or CSS-in-JS: "const myComponentCSS = css\" (which probably won't show up right because of markdown not interpreting backticks

I suppose if your team is operating on one big global .css file (instead of using CSS modules or CSS-in-JS) you have to make sure it is using the same naming conventions.

But for the most part, it's more important to me that class names are unique and descriptive of content rather than follow a certain format, so that they can be easily searched for in the source code of the finished HTML (for debugging) or understood by the rest of the developers on the team.

One of the patterns I'm seeing is that people who really seem to like Tailwind point out how much more useful it is than CSS, and don't seem to have a whole lot of experience or willingness to try CSS-in-JS or pre-processor (SCSS) solutions.

It stops me from doing stupid things like getting into the habit of writing bootstrap-esque classes á la .card .card-title .card-body and so on.

I have no problem with utility classes, used sparingly. Ideally I'd prefer SCSS mixins or resuable CSS-in-JS code compared to them, but what's wrong with that?

mixin card {
  &.title {
    /* css */
  }
  &.body {
    /* css */
  }
}
.recipe {
  @include card;
}
.captioned-photo {
  @include card;
  & img {
     /* css */
  }
}

<div class="recipe">
  <div class="title">title</div>
  <div class="body">body</div>
</div>
<div class="captioned-photo">
  <div class="title">title</div>
  <img src="foo"/>
  <div class="body">body</div>
</div>

But why would I go through all the hassle and time to slowly write all the css classes myself that are literally right there from the get-go?

This is a compelling argument for a framework like Bootstrap, but not one like Tailwind.

One of the problems I have with tailwind is how many of it's classes - something like 99% -- though I haven't done the actual math, I'm pretty sure that's the right ballpark, give or take 1% -- are just one or two lines of CSS.

"p-8" is just "padding: 1.5rem;". "rounded-full" is just "border-radius: 9999px".

I did go through and identify about nine tailwind classes (out of how many hundreds?) that DO actually provide some convenience and am rewriting them in my own utility class library.

Overall it's just crazy fast to get websites done with tailwind while staying consistent in your markup, especially in prototyping stages.

By all means, prototype away, but I wouldn't recommend it if you're dealing with end products meant to be delivered to the product owner.

[Alex Janke]

I honestly don't use it as much as my text might suggest but I can see the appeal and tried to find some points to make you maybe see them from a different point of view :D

but I wouldn't recommend it if you're dealing with end products meant to be delivered to the product owner

This caught my eye because I honestly never worked in a situation where I hand over code to another owner and I mostly work on internal products. The rare SaaS things I worked on were in good ol' SCSS though.
What would be interesting to see is the type of projects people work on using Tailwind. Is it a lot more agency-type of projects, internal sites (as in admin tools) or SaaS?