Using Tailwind with WordPress page builders is a bad idea

Tailwind is a popular "utility-first" CSS framework that bills itself as "an API for your design system." But, as you'll learn in this article, it's a bad idea to use Tailwind – or any utility-first framework – with WordPress page builders.

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.


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.


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

If you still don't know me, I invite you to read my story or learn more about how I work.


Sao Paulo, Brazil

Victor Hugo | +55 (11) 98879-2396


Sydney, Austrália

Rennan Luiz | +61 421 816 296
2013-Today / Victor Hugo Ferreira da Silva | Victorhfs. All rights reserved | Barueri, Sao Paulo - Brazil | CNPJ 18.247.998/0001-99. | This site is built with Oxygen Builder on WordPress and hosted on DreamHost. The source code will be hosted on Github and Figma.