WordPress theme development with Tailwind CSS and Laravel Mix
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:
- 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)
- Anything I build with this is extremely portable as it is, primarily, just markup that can be extracted from the front-end
- 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:
