Web development is always changing and one area that has seen a lot of change in recent years is CSS. CSS is obviously hugely important to web development and without it your site would look a little underwhelming to say the least. But CSS has a reputation for being a bit unruly and there have been plenty of attempts to “tame the beast” so to speak. We’ve had Bootstrap, BEM, Sass, Bulma, a combination of the above, and the list goes on. But recently there’s been a new kid on the block which has been causing waves, especially in the SPA world where developers generally have tight control over their markup, and that is Tailwind CSS.
If you haven’t heard of Tailwind, it’s a utility first CSS framework. Clear? Didn’t think so. In the past we’ve seen CSS frameworks like Bootstrap which provide you with a set of CSS classes that describe what you’re building. .button can be applied to an element to make it look, unsurprisingly, like a button. .button—primary would change the colour. On the other hand Tailwind CSS gives you a CSS class for every possible CSS property. So instead of describing what you’re building, you would describe how it should look. To recreate a button we might write something like p-2 text-white rounded bg-blue-900 hover:bg-green-900. Sure it’s a lot more verbose, but it scales incredibly well, and there are a bunch of ways you can simplify common components, but you can read more about all that in the Tailwind CSS docs.
Traditionally, CSS standards for WordPress have been a bit of a Wild West, with developers doing pretty much whatever they want. WordPress has a lot of built in class names that it uses and expects developers to support, and then there is the ocean of plugins that could be adding whatever CSS rules they want into your site. But as time has gone on and tools have progressed things have become a little less crazy with more and more developers building their themes using either a CSS library like Bootstrap or building their own. But even now it’s not uncommon to be left with a site that has a relatively large set of CSS rules due to the wide variety of situations it needs to support.
The good news is that we can do better! And we’re going to leverage Tailwind CSS to get there. Before we dive in to the solutions though, let’s look at some common pitfalls and issues that we want to solve for when trying to optimise CSS for WordPress.
One of the most frustrating and difficult aspects of CSS development is keeping the bundle size small which has a huge impact on page load times. It can get real difficult trying to figure out critical render paths, removing bloated styles, allowing for lots of different layout options etc. Tailwind takes a slightly different approach and uses Purge CSS to remove any unused styles. And because we are using a utility library we’ll often use the same class names over and over again. This means that once we’ve ripped out all the unused class names, we’ll generally be left with a very small subset of class names, and a small bundle size. We no longer need to account for .button--green, .button--blue, .box--green, .box--blue because we can use .bg-blue-900 and .bg-green-900 and we went from four class names, to two! You can imagine how this will start to scale well as we add more and more components and styles.
While we can’t avoid this completely, especially in a WordPress environment, we can certainly mitigate the extent that our class names and styles are overridden by third parties. WordPress itself has a bunch of class names set on default elements that it expects to exist, but if you’re going to use Tailwind along with another theme you’ll have to make sure there are no conflicts with other themes in particular. For example, if you use Enfold, they already have a CSS definition for the hidden class which conflicts with Tailwind’s hidden. You might have something like hidden md:block and expect to see your element pop up on medium sized screens upwards, only to find that it’s still getting styles from Enfold's hidden and is positioned way off the screen somewhere. With this in mind it’s best, where possible, to start with a clean slate. If you’re going to use Tailwind, start with your own theme, use a boilerplate, or use a Tailwind based theme like Gust. More on that below.
If the content editors of your site are not developers or have little knowledge of CSS, one of the big drawbacks is that they’ll need to know about Tailwind’s CSS class names in order to make things look pretty. This is why many people flock to page builders like Enfold, Elementor, Divi, and the likes, because they can drag and drop things and it “just works”. But with that comes a lot of overhead, as we’ve mentioned previously. If you’re going to install Tailwind yourself, there’s no real easy way to provide your users with this convenience and leverage the benefits from Tailwind. In this situation, you’re best to reach for a theme like Gust which has a drag and drop editor built into it and comes with plenty of components with all the class names applied to them already. This way your non-savvy editors can create the content without requiring a tonne of CSS to get your there.
We couldn’t write this whole thing and not plug our own product could we? We obviously think Gust is great. It is a WordPress theme built with Tailwind CSS that aims to solve all the above issues to make working with WordPress less of a struggle. Gust has a drag and drop editor with a bunch of pre-made components and templates to give you a head start, while also allowing you to create your own components and override the ones we give you. It has deep support for Tailwind CSS, letting you apply any and all of the Tailwind class names to your elements. You can also edit the Tailwind config so you can keep complete control over your brand, and if you need any variations that Tailwind doesn’t supply out of the box, you can simply add them yourself. Gust will keep track of all the class names you use and run them through Purge CSS providing you with a production build of your CSS that is as lean as possible.
There are a heap of other nifty little features that we know you’ll love like direct access to WP Query and more. You can try it out for free, or go premium to take advantage of all the features it has to offer. Check it out.
There are a few different boilerplates and tutorials around that explain how you can use Tailwind in WordPress. We haven’t vetted any of them, so use them at your own risk but a few resources that might be helpful are:
We wouldn’t recommend doing this but figured it’s worth mentioning that you can actually just add the Tailwind CSS file to your site and add class names here and there. But beware that you’ll likely end up with an enormous download, which will have some fairly negative effects on your site’s performance. That said, if you want to just mess around with it to see how it all works, this is a quick way to get going.