Using Tailwind with WordPress page builders is a bad idea

Note #1: I'm not going to use this article argue whether Tailwind is a good or bad framework. That's a separate discussion that would require its own article.Cool? Let's get started!

What is Tailwind?

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

GeeksforGeeks

It's a MASSIVE framework with a STEEP learning curve. You can browse the Tailwind documentation to get a pretty quick understanding of how massive and technical this framework is.

Also: I'd guess that most people who advocate for using Tailwind with WordPress really only know/understand the base level of Tailwind and aren't really using it anywhere close to its full extent.

@apply

And now we arrive at the favorite argument of people who support using Tailwind with page builders, @apply.

.btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
  1. Using Tailwind in general is not easy. Aside from the technical challenges of actually integrating it into a site, there is a steep learning curve.
  2. Using Tailwind inside a page builder in WordPress is pretty much the worst way to try and use it.
  3. Tailwind was not designed for use inside of WordPress page builders and using it in such cases is forcing a square peg into a round hole.
  4. Tailwind has a lot of challenges that extend far beyond the page-builder-specific issues I outlined in this article. You'll need to take these into account as well.
  5. If you go down the road of Tailwind inside of page builders you're going to waste a lot of time, introduce a lot of extra challenges, and have a less scalable and maintainable site at the end of the day.

Heading 3 h2

Heading 4 h2

Heading 5 h2

Heading 2 h3

Heading 3 h3

Heading 4 h3

Heading 5 h3

Heading 1 h4