A few months back I started exploring Tailwind CSS – a utility first CSS framework – and it has fast become my first choice for building UIs.

Coming from a semantic approach using a modified BEM style of CSS, the utility-first approach took a little getting used to. I mainly struggled with how large my HTML class attributes were getting and at first, Tailwind CSS just didn’t stick.

But! I kept coming back to it and now really appreciate the tool for what it offers:

1. It’s really fast to build UIs out of as I’m only really writing minimal CSS and don’t have to switch between HTML and CSS as a result of that or wait on CSS to compile (I use SCSS)
2. Anything I build with this is extremely portable as it is, primarily, just markup that can be extracted from the front-end
3. It’s the perfect platform for building entire libraries of page templates and UI components for future use

A boilerplate for WordPress themes using Tailwind CSS

I’m so sold on Tailwind that I decided I needed a theme boilerplate to get my WordPress builds off the ground as fast as possible. I’ve based the boilerplate on my Laravel Mix Theme Boilerplate – essentially extending that to use Tailwind – and have included the following features:

• PurgeCSS on production builds to keep the deployed CSS file size to a minimum
• BrowserSync for live reloading while you work
• A PSR-4 autoloader
• A static view handler for rendering ‘dumb’ views in PHP
• Filename versioning with auto-resolution

For more info, check out the GitHub repository and watch the following video:

One last thing…

If you liked this article, I'd be incredibly grateful if you tweeted about it.

Also, I don't send emails often but when I do, I try to fill them full of useful goodies. If you like code snippets & dev tips, join my mailing list. There's no catch but I'll probably want to tell you about any new plugins & tools I build.