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.
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
import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start()
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’ve added a
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.