Dear Tailwind, I love you.

As sappy as the title sounds, I am in love with Tailwind CSS. If you’re not familiar, it is a utility-first CSS framework designed to be as unopinionated as possible. This means you slap some utility classes onto your element and it is styled without writing a single line of CSS.

I was introduced to it through a friend whose agency,  BeGreat, has started using Tailwind extensively in their builds. I’m a WordPress-focused developer and so are they and we’ve figured out a mostly painless way to work with Tailwind in developing fast WordPress themes fairly quickly.

The biggest issue with Tailwind, a blessing and a curse as it saves space, is that Tailwind is meant to be used with PurgeCSS, which scans your files and purges any unused classes. Obviously, with dynamic content in WordPress, there’s not really a way to know what kind of classes the end-user may need when writing.

I would imagine for more news or blog style projects, Tailwind may not be a perfect choice, but I recently finished a site for a beauty and skincare brand, Kuza Products, where, with the power of ACF, I was able to limit the client’s input to mostly pre-defined ACF fields, giving me in the PHP files control of what classes were assigned to various elements. With this approach, some careful planning, and ACF, you’re able to focus and limit the dynamic content to live purely within components you’ve defined in your PHP theme files.

There were some extra steps, I found a list of common WordPress classes and was able to whitelist them from being purged, but my main concern was the speed of development on this project. I had a very limited timeframe to craft this site, only two weeks, and so I had to come up with a fast solution.

I love browser-sync and with a little setup, was able to get it working with WordPress and rapidly create templates without having to tab between a stylesheet and the theme’s PHP files. This let me essentially have this process:

• First I essentially built the site statically in pure PHP WordPress theme files. All the images and content were saved to an assets folder and text was hard-coded into the theme.
  • This let me see exactly what the final content was going to look like and make sure my theme was pixel-perfect and working as intended to match the mobile and desktop layouts.
• Secondly, I set up ACF fields and copied over the content that had been hardcoded into the theme. This step I could probably (and will probably in the future) try and set up ACF fields as I go, but I needed a quick solution.
• Third, spruced up the theme with some optimizations (mainly stripping out all non-essential plugins and functions from WordPress).
• Fourth, launch that puppy.

The result was a well built site for a national brand, high google page speed scores, and a happy client. My next projects will also almost certainly use tailwind and I’m excited to evolve my workflow with it. Recently Tailwind added a JIT compiler and I’m already looking forward to trying to use that in my next build.

As of now, if you’d like to try my setup, I have switched to using Laravel Mix to watch my files and build the tailwind script and I have a starter WordPress template on my GitHub which can be found here.

Thanks for bearing with my cheesy love-letter to Tailwind. I promise I have no affiliation with Tailwind, but I really do just love using it.