Tailwind 3.4, block editor–only styles, better Tailwind Typography support, fixes and refactoring
I haven’t written release notes since April, but a lot has happened since then! These notes cover the four releases since then, starting with the exciting parts and moving on to fixes and refactorings.
Tailwind 3.4
The bonus Tailwind release ahead of Oxide, Tailwind 3.4 includes a number of newly supported CSS features and a bunch of developer conveniences you may never have noticed were missing.
I’m going to be using dynamic viewport units on my current in-progress project that I’m delivering in January, and I’m already enjoying having every opacity in 5% increments.
But there’s a lot more, with Tailwind 3.5 and Oxide also promised for the new year.
Block editor–only styles
There have been a number of issues and discussions posted to GitHub since _tw launched asking the best way to add styles just to the block editor.
For the longest time this didn’t come up for me very often, but it very much did on a recent project, and I agree with all of the people who asked before and wondered why it couldn’t be easier.
I’ve added a separate CSS file—./tailwind/tailwind-editor-extra.css—that is processed by Tailwind (so you can use @apply and other Tailwind functionality). The output file is style-editor-extra.css, alongside the existing style.css and style-editor.css files. It is added by default as an editor style in ./theme/functions.php.
Better Tailwind Typography support
One of my lingering to-do items on _tw was to make Tailwind Typography’s .lead styles work with the block editor without modification. I tried a few approaches here, and I ended up going back to using a fork of Tailwind Typography to cleanly support the required classes.
A “Lead” block style is now created by default in ./javascript/block-editor.js. This applies the .is-style-lead class to the active paragraph. (Which is the sort of thing you might do for the first paragraph of an article—your lead—to distinguish it from the rest of the copy.)
Cleanly adding the .is-style-lead class alongside every instance of .lead in Tailwind Typography’s output proved challenging, leading to the return of @_tw/typography.
This also allowed me to move the classes tweaking Tailwind Typography for the block editor to that plugin, cleaning up the ./tailwind/tailwind-typography.config.js file. While I was making changes to that file, I also made it easier to use a custom colour theme, and I added every instance of font weights from Tailwind Typography, as I often find myself wanting to reduce these down to a smaller number of weights.
Fixes and refactoring
In WordPress 6.3, there was a change to how the block editor is loaded, sometimes putting it in an iframe, and sometimes not. The biggest refactoring work of the year came in adjusting how Tailwind Typography classes are added to the block editor to support both possible outcomes: a block editor inside or outside of an iframe. For anyone dealing with this issue in an existing theme, I documented the steps required to fix the problem.
Meanwhile, there was an issue preventing _tw from working properly with Yarn, now resolved, and updates to the theme.json file stopped triggering a configuration update in Tailwind. I struggled a bit with this latter issue, as fixing it required me to add two new npm packages (chokidar-cli and touch), but I decided enough people would be surprised Tailwind wasn’t rebuilding after theme.json edits that it was worth the added dependencies.
Up next
Some priorities for 2024:
Expand the existing documentation to cover the block editor and Tailwind Typography changes described above- Begin adding screencasts to major documentation sections
- Redesign and rebuild the underscoretw.com website
I’m also going to revisit Tailwind in WordPress block themes, with no idea what I’ll find. (If I create a block theme version of _tw, the hybrid theme version will continue to be supported for years to come.)
And that’s it for 2023! Thanks to everyone who uses _tw, who posted issues or discussions on GitHub or who got in touch in another way. Much more to come!