Using Tailwind CSS the wrong way

I was in the midst of power-washing Tailwind classes off of a Phoenix component (for reasons) when Xe Iaso posted this: CSSWind: bloat-free component styling. Here’s my (unironic) opportunistic tie-in.

I’m persistently perturbed by HTML festooned with utility classes. But Tailwind presets tangibly save me typing time and decision-making time, and they’re easy to remember.

What I’ve found myself doing, increasingly, is giving elements more-or-less semantic classes and hiding the styling away in .css files where, also increasingly, I use Tailwind’s @apply directive to put Tailwind classes in place of CSS.

It all comes out in the wash when Tailwind spits out a file full of regular CSS.

This would seem to be an official anti-pattern, and I’ll entertain the thought that it may just be a stubborn lone-developer habit. I’m wearing my stubborn lone-developer hat at the moment, so until I grow out of it, I think it’s cool that Tailwind itself doesn’t judge me for it.

An example

In:

div.annotated-content-container {
  @apply grid grid-cols-[4fr_3fr] col-span-full rounded-lg mb-6 bg-zinc-100;
  background: linear-gradient(to right, rgba(241, 245, 249, 1) 57%, rgba(241, 245, 249, 0) 43%);
}

.annotated-content {
  @apply w-full items-start rounded-lg border border-slate-300 py-4;
}

.subgrid-holder {
  @apply grid grid-cols-subgrid col-span-full;
}

Out:

div.annotated-content-container {
  grid-column: 1 / -1;
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: 4fr 3fr;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
  background: linear-gradient(to right, rgba(241, 245, 249, 1) 57%, rgba(241, 245, 249, 0) 43%);
}

.annotated-content {
  width: 100%;
  align-items: flex-start;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity));
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.subgrid-holder {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}