A Tailwind boilerplate for WordPress

by Jeffrey van Rossum

For years I have been developing custom WordPress themes, mostly with Bootstrap (3 and later 4). But around a year ago, I started using TailwindCSS instead.

I first got familiar with Tailwind through the Laravel community and started using it in various Laravel projects I'm working on, including Addrow.

I enjoyed working with Tailwind so much, that I wanted to use it for WordPress development as well.

Creating a boilerplate

If you develop multiple custom themes, it can be very time consuming to set the basics up every single time. Installing Tailwind, setting up compiling, adding styling for Gutenberg (the WordPress block editor). So after a while I made a boilerplate theme which could act as a starting point for theme development with Tailwind. I called it TailPress.

TailPress

Along with Tailwind, the boilerplate also uses Laravel Mix for compiling.

Whilst developing themes, I found I was still doing quite a bit of repetitive tasks. Mostly for settig up support for Gutenberg. For example, providing styling for the alignment options Gutenberg offers, styling the defined theme colors and font sizes. While I was mostly making minor changes to TailPress for the better part of the year, the last couple of weeks I've been more active.

For example, a week ago, I added the new TailwindCSS version (2^).

Latest release v0.0.2

Today I released TailPress v0.0.2. With this release I've tackled quite some of those repetitive tasks.

Within this version, alignment, color and font size classes are generated out of the box. To achieve this, I've setup a Tailwind plugin. The plugin is not extracted for now into a separate package, and this way it easily customizable for everyone who wants to change things.

Getting started

If you are a WordPress theme developer and like working with TailwindCSS, feel free to check TailPress out. Also, don't hesitate to contribute or let me know what you think!

Comments

Talk about this article on X.
Reposted by TailwindCSS Bot
A @tailwindcss boilerplate for #WordPress vanrossum.dev/21-a-tailwind-…
Replied by Jeffrey van Rossum
Dank je! Mocht je tips hebben voor toevoegingen/verbeteringen, laat het gerust weten.
Replied by Bowe Frankema
Supertof project. Ik ga er mee aan de slag :-)
Did you like this post?

If you sign up for my newsletter, I can keep you up to date on more posts like this when they are published.