May 2022

Moving towards Varia and away from Underscores, adding JavaScript bundling, and much more!

Many of these updates began with an issue posted to the _s repository encouraging Automattic to archive the project.

When I launched _tw around a year ago, I was optimistic Underscores would continue to receive updates. That optimism is now gone, and I’ve begun modifying _tw accordingly.

While _tw was always fundamentally a fork, its underlying structure tied it directly to the ongoing fate of Underscores. The _tw generator works by transforming Underscores into _tw, rather than existing as a separate codebase. This makes it trivial for me to incorporate ongoing changes to Underscores.

With this round of updates, _tw became a true fork. I will monitor the original Underscores repository, but I will no longer limit myself to changes exclusively focused on adding Tailwind support to Underscores.

Drawing from Varia

In search of a new theme to use as a basis for _tw, I found Varia via this comment on GitHub. Varia seems to be as close to an Underscores successor as exists at Automattic and receives ongoing maintenance.

This update begins a two-part process in overhauling the HTML markup on theme pages to bring them roughly in line with Varia. I’m also reviewing Varia for other changes that would benefit _tw.

Adding JavaScript bundling

I didn’t consider support for JavaScript bundling to be part of my original mandate with _tw. In initial releases, I included Alpine.js, which felt as close to a “Tailwind for JavaScript” as was ever likely to exist. I stopped, though, realizing that it was more opinionated an inclusion than I was comfortable making.

Following advice from _tw users on GitHub, I’ve added esbuild to the generator. As an added bonus, this makes it trivial to get started with Alpine.js by adding with npm:

npm install alpinejs

And then importing and initializing Alpine in javascript/script.js:

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()Code language: JavaScript (javascript)

If you’re already running _tw’s watch command, saving that file will automatically trigger the build process, and the theme/js/script.min.js file will be updated with everything needed to run and initialize Alpine.

In experimenting with various esbuild configurations, I was continually blown away by its speed. I have a monitor that refreshes at 120 Hz—so every 8.3 ms—and esbuild consistently completed its build in less time than it takes for my monitor to redraw the screen.

Improved editor support

Rather than try to provide options dependent on developer preferences for the block editor, classic editor and Advanced Custom Fields, I’ve added support for all three, even when running simultaneously on a single site, with a single style-editor.css file and no configuration.

This represents an evolution in _tw’s approach, as it has been block-editor–first since its original release. To address feedback, I’ve experimented with various improvements, but this is the first that I feel truly solves the problem. I recently worked on a site that used the block editor for some pages, the classic editor for others, and ACF’s WYSIWYG field on others still. In all three contexts the styles from Tailwind Typography previewed without issue and without any changes to the base _tw configuration.

Automatic class sorting

Since the release of Tailwind’s Prettier plugin, I’ve wanted to bring automatic class sorting to both PHP and CSS files in _tw. The Prettier plugin worked well for CSS files, but PHP was more of a struggle. I wanted to continue using WordPress Coding Standards for PHP_CodeSniffer, and Prettier’s support for PHP templates is limited.

I settled on a Tailwind plugin for eslint. Since _tw already uses eslint for JavaScript files, this required minimal changes to the project, and I’ve been enjoying automatic class sorting across both PHP and CSS files since.

Other changes

I’ve added a components folder to act as a home for CSS from JavaScript components and WordPress plugins. I’ve also improved the phpcs.xml.dist file, added support for nested declarations in Tailwind by default and removed customizer and custom header support.

I think that covers it! As always, please mention @gregsvn on Twitter if you have any questions or comments.