If you feel like working with a cool CSS framework and wonder how to use TailwindCSS with WordPress, I totally understand. I love the TailwindCSS overall style and UI design. And I wanted to figure out how to integrate TailwindCSS into my WordPress and Bricks workflow. Here’s one solution that I found, and that seems to be working well to get started fast. But, with some hassle to make it work.
Table of Contents
The goal of using TailwindCSS with WordPress
I’m a Libra star sign. And it is said that we like balance, harmony, and beauty. Yeah, that’s probably why I like TailwindCSS so much. And I spent a lot of time on their website, reading their documentation and design blog, and glazing over their beautiful UI design library.
I enjoyed building my first TailwindCSS project when I coded my first Astro website. That was, in fact, this website you’re reading from now.
But, the Astro version of this site is no longer live. It was for sure a faster website since it was built on Astro. But the reason I went back to re-building on WordPress was because of some limitations I had in my initial Astro build regarding SEO and pagination at that time.
It would just take too much time refactoring the code for proper SEO, image handling, pagination, and stuff.
So, I wanted to find out a way to use Tailwind CSS in WordPress. Then I could continue building in the way I did. I like the classes and mobile-first approach. And to me, using TailwindCSS made sense, and it was not that hard to learn. But how do I get it integrated into WordPress, and especially to work well with Bricks Builder?
There may be other ways to integrate TailwindCSS with WordPress, but the method I present in this post seems to be the easiest solution when using a modern WordPress page-builder like Bricks or Oxygen.
And my goal in understanding how to use Tailwind CSS with WordPress was to have a smooth workflow in Bricks, have a themed and consistent framework, enjoy the power of TailwindCSS, but benefit from using a builder like Bricks to construct the website. So, I first started setting things up using LocalWP. As its a fast way to test WordPress on a local computer.
Now, you will soon find out down in this article that it did not go as planned. And it’s the reason I went back to using another framework instead.
Here’s how I set up Tailwind CSS in WordPress
Just a note: At the time of writing this post on how to use TailwindCSS in WordPress, they just came out with a new version 4.0. I see videos on YouTube talking about how much simpler the primary Tailwind setup now is. But I‘m not sure if this would have any effect on how to integrate Tailwind CSS with WordPress after this update.
Anyway, here‘s how to quickly set it up. We’ll be using a plugin for TailwindCSS in WordPress. And I think this is an important consideration because Tailwind has a special way of handling customization and the processing of the final CSS output, which is one of the core features of Tailwind. To make sure the final output and website design only load the CSS it needs.
- Get a plugin called Winden from dPlugins to integrate TailwindCSS.
- Define your styles, such as color palette, fonts, and spacing scheme.
- Choose to integrate with either Bricks Builder or Oxygen Builder.
This is the short version of the setup. And I think it’s enough for you to get started testing how to use Tailwind CSS in WordPress for your workflow. But I have to say, for me, it did not turn out to be the same experience and ease of use as custom coding a design in HTML and building things up from scratch, like with my Astro project.
If you have been playing with custom coding at all and use VS Code with a Tailwind extension, you know is easy to list up relevant classes when typing.
The barebones Bricks setup that failed for me
Part of the reason I wanted to find out how to use Tailwind CSS in WordPress was to be able to build a fast site, with a minimal load of shit-scripts and other CSS from WordPress and Bricks Builder.
So, I went for a barebones, stripped-down setup in Bricks as a starting point.
Using Winden to integrate TailwindCSS with WordPress has an option to select “Dequeue builders styles”. This strips out the automatically loaded basic CSS styles from Bricks or Oxygen. So you basically start with NO styles in the page-builder at all.
–This can be something to get used to.
I wanted to try this because I want to be able to build “clean” just like you would do with a manually coded HTML site. Except, of course, that you are able to build the WordPress site using your page-builder.
Well, it could be that I did not spend enough time setting things up properly. But, with the Winden plugin settings adjusted, it was not easy to get the feeling of being in control of the CSS classes and see the expected result.
In Bricks, I also see bugs in the left sidebar for Tailwind CSS classes. I kept getting a list of meaningless fields I didn’t know what they were there for. Not only that, but I ended up with too many questions regarding the actual inner workings and how-to’s with the Winden plugins vs. Bricks settings. So, I gave up.
If you figure out how to use Tailwind CSS in WordPress in other ways, let me know.
Setting up your page-builder settings
Anyhow, it could just be my setup that was not correct. I did check the documentation for Winden, but it’s terribly put together and lacking a lot of information. So, I went for a hysterical click-and-test all kinds of option approach.
I’m not going to go through a full workflow in this post on how to set up Tailwind CSS with Bricks or Oxygen. There are a lot of various things you can do, may want to do, and probably should NOT do. I don’t know, because the documentation is not saying much.
So I would say, it’s not that straightforward. The complexity of things is why I actually went back to using Bricks without TailwindCSS, and instead use AutomaticCSS. Which is the best CSS framework for WordPress at this time. And the reason is that it’s made for WordPress. And specifically, it’s made for Bricks Builder and Oxygen builder.
Anyway, using dPlugins to set up TailwindCSS has become much better with version 2.0 and up. And one neat feature they now support is connecting and reading off the settings straight from Bricks Builder.
You can separately check and enable to dynamically synchronize Bricks Builder settings for colors, font family, and screen sizes. You can also choose to only keep these available settings, or EXTEND them (as it’s called in Tailwind terms) with the default TailwindCSS styles. This can be nice. But it will also load a huge list of options that are most likely NOT part of your design style-guide for the website project you are working on.
Of course, the nice thing with the Winden plugin is that you have both your Styles and Config panels for the usual TailwindCSS configuration. So you DO have the options to set things up properly the way you want. And most likely in that case, you would just leave out any Bricks or Oxygen settings completely.
Learn how to use Tailwind CSS in WordPress, or AutomaticCSS?
I think for now, the answer is easy. If you want to start quickly and actually have control of things:
I would go for AutomaticCSS. Because it will get you started faster with what you are trying to do!
You will have a defined style guide via a professional CSS framework to build with. And it’s built for WordPress with Bricks and Oxygen builder. You will just be able to start working faster.
If you want to build with TailwindCSS, you probably can. But it’s going to be a different and a little bit cumbersome workflow. And you will have to set things up properly before you can even start. In case you feel that the basic setup of the Winden plugin to get TailwindCSS to work in WordPress, you haven’t really defined any of the important aspects of using a CSS framework:
To have a defined style so you can build with consistency and predictability.
In case you actually read this full post and you figure out how to use Tailwind CSS in WordPress, please let me know. I would love to see a WordPress website success story with Tailwind CSS as the framework.