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;
}- 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.
- Using Tailwind inside a page builder in WordPress is pretty much the worst way to try and use it.
- 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.
- 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.
- 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.
