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:

  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:

YouTube video

Need a website? Let's talk.

From website design & SEO through to custom WordPress plugin development. I transform ideas into dynamic, engaging, and high-performing solutions.
Subscribe to get the latest insights & updates in the world of web and how it impacts your business and website.
© 2024 Phil Kurth  |  All rights reserved.