How to use TailwindCSS on WordPress (Without complicated coding)

What is TailwindCSS?

Tailwind CSS is a utility CSS framework. This means that each element you create is styled with multiple classes instead of create a class uniquely for that element. In essence, this allows you to build entire sites without ever needing to open up a CSS stylesheet.

What makes Tailwind so great?

There are hundreds of reasons why you should chose tailwind and why it’s quickly becoming the most used CSS framework out there. But as an agency or business owner, there are two main reasons why you should care:

1. Not limiting yourself to a single platform:
   • Avoid using / learning tools and frameworks that tie you to a single platform. The truth is, as much as you might be in love with your selected platform today (eg: WordPress), it may not be the best solution long term and you want to have room to grow, experiment, change and adapt to whatever your business needs. The advantage of using a framework like tailwind (opposed to something like ACSS), is that it’s a framework that can be used on literally any web/app project. Weather you shift to a different platform or start building your own SaaS app, you can keep using what you’ve learn and implement the exact same branding/styling/look wherever you go.
     
2. JIT Engine. Infinite scalability without sacrificing speed, functionality or complexity:
   • Just in time (JIT) engine is a tool built by the tailwind team that essentially scans your website and only loads up what is required, often saving seconds in load time. Now if you’re just building a little 5 page website that never evolves this will not make a massive difference. But if you’re looking to grow a business your website is going to need to grow with you. The (unfortunate) was websites work is with every new element you create or style you’re adding to the sites CSS file, so if I create 1 new page with 5 new elements, that’s potentially hundreds of extra lines of CSS added to the file that will need to be loaded onto EVERY SINGLE PAGE.
     
     Now with a utility css framework, you’re always re-using the exact same styles and style classes, meaning regardless of how many new pages you create you’re never actually generating any extra CSS. In theory this sounds great, but in practice to cover every possible CSS variable as a utility class would create a massive stylesheet anyways, defeating the purpose.
     
     So this is where JIT comes in: TailwindCSS is that massive utility stylesheet with just about every possible variation out there, then JIT sits on top and removes the large majority of the framework that is not in use. Keeping things lean, clean and mean.
     
     

How to use TailwindCSS on WordPress?

Ok into the real reason why you came here, how do we actually get TailwindCSS loaded up and running on a WordPress website?

Step 1: Load up Tailwind on your WordPress website:

There are a couple of ways to do this, but only will actually deliver the results you need:

• Using Winden: Winden is currently the only plugin on the market that allows you to benefit from the full functionality of tailwind. It’s builder agnostic (meaning you can use whichever page builder you want) and add functionality like JIT which would usually require you to have a node server setup and configured with tailwind. They achieve this by running their own servers and connect to your WordPress website, removing the need to build or maintain anything yourself.

Step 2: Chose a page builder:

There are literally hundreds of page builders on the market at the moment, our builder of choice is Bricks Builder. There are a few reasons we love bricks:

1. It’s very lean, essentially only loading up what is required for each page/element.
2. It works well for both developers and non developers, paving a nice learning journey where it will grow with you. You could jump in with zero coding skills and be able to build a site. Or you could use with with coding skills and build exactly what you want without loading a bunch of bloat.
3. It’s going to stick around for a while. Bricks is built on a new technology (vue.js) and is likely to be in the market for quite a while, ideally you don’t want to be investing a lot of time into a builder that is reaching the end of its life (IE OxygenBuilder). Not that oxygen or any other builder are bad choices, just that they are built on older tech that is no longer maintained or updated, limiting how much these builders can be improved in the future.

Step 3: Configure TailwindCSS to work with your WordPress page builder:

Ok so we’re going to use bricks and winden for this example, but the same principle can be applied to any page builder.

• Make sure the HTML font scale is set to 100%. Everything that scales in tailwind is based off the font size and if it’s not set to 100% it won’t size correctly. In bricks this can be setup under your theme settings -> typography -> HTML font scale.
  
• Add your brand colors to winden. For every client project we use 2-3 color palettes (variations), you should not ever need any more. We’re not going to go into too much detail as to why these are important from a design POV, we’ll cover this in a separate article.
  

• Primary color + shades (total of 10 colors): These are shades generated from your primary color. You can generate these automatically with a tool like this one. From there you can copy the output and add it to Winden.

• Neutral color + shades (total of 10 colors). Same thing here, plug in your neutral color of choice and copy/paste the neutral color codes into winden:
  

• Secondary color + shades (again, total of 10 colors although the secondary palette is really optional).

Step 4: Create a page, template or post:

This step is pretty simple, from your wordpress dashboard, head over to pages or posts (or any other page type you may have created) and create a new page, publish it and open it with your page builder of choice.

Step 5: Style your WordPress page with TailwindCSS

With you new page open you can now start styling your elements with tailwind. Simply click on the element you want to style and add the relevant tailwind class, remember to use the naming convention you added with your colors (in our case, we have used “P” to represent our primary colors and “N” to represent our neutral colors). So if you wanted to give a button a background color that matches your primary brand color, simply give it the class “bg-p-500”. Nerdcave have put together a great resource for finding and remembering TailwindCSS class names, check it out here.

You can also now start importing / pasting bricks builder templates made with tailwind (assuming you’re using bricks). You can access and copy these templates our templates page.

Step 6: Clear your cache and regenerate critical (required) CSS using Tailwind’s JIT engine alongside WordPress:

Last but not least, you’ve completed your pages and are ready to publish them live. There are a couple of final steps.

Go back to your dashboard -> winden -> toggle on “Use the cached CSS file instead of CDN” -> save -> refresh -> “Re-generate cache”. (the toggle on part only needs to be done once, but you will need to re-generate cache every time you build out new components with tailwind).

Once the cache has been generated, clear cache with any existing caching plugins your may be using.

And done! You’ve now created your first page with TailwindCSS. Go check it out in incognito tab to see how fast things load, then know that that’s now how fast things will load always and forever while you’re using TailwindCSS.

xoxo.