Custom WordPress themes, now with Tailwind

Start quickly, or start from the very beginning

Quickstart

Already know your way around WordPress themes, package managers and local development? Here’s the condensed version:

1. Generate and unzip your theme repository
2. Run npm install && npm run dev in that folder
3. Create a symbolic link to the repository’s theme folder in your local development environment’s wp-content/themes folder
4. Activate the theme in WordPress and run npm run watch
5. Add Tailwind utility classes with abandon
6. Run npm run prod and then deploy

Overview

Here’s a quick summary of what you’ll need to do to integrate Tailwind with WordPress:

1. Set up a local development environment: If you already have a local development environment for WordPress, you should be all set. If not, Delicious Brains has you covered with articles on your local development options, both CLI- and GUI-based.
2. Create a custom theme: This is where _tw comes in! You’ll generate your Tailwind-optimized WordPress theme, install it in a local WordPress environment, and use utility classes to style it any way you like.
3. Create a production build: Once you’re happy with how your site looks, you’ll create a production build, locking in the subset of Tailwind utility classes needed to style your WordPress theme. (Not sure what this looks like in practice? Tailwind’s documentation has an in-depth look at their approach to class detection.
4. Deploy your production build: When you’re ready to go live, you’ll upload your theme to the web host of your choice.

After deploying to production, you shouldn’t plan to use new and arbitrary utility classes within the WordPress block editor. The process of creating a production build will lock in a fixed subset of utility classes, so you need to prepare in advance (likely by safelisting classes) if there are specific utility classes you’d like to make available within the block editor that you don’t already use elsewhere on the site.