Revisiting Tailwind 4, a better developer experience, and improving Tailwind Typography support
Tailwind 4, four months later
It has been interesting to follow Tailwind 4’s reception over the last four months, and to see what bugs have cropped up in _tw as a result. I’ve been working to resolve a couple of upstream issues in first-party Tailwind repositories, and I’m hopeful that by the summer everything will feel just as stable as Tailwind 3 did.
In the meantime, I’m very comfortable using Tailwind 4 in production, and I think you should be as well!
Returning to PostCSS’s light
I had been excited to cut down on the number of npm dependencies in _tw, but I think I went too far. A lot of this was by necessity: I wanted to use the Tailwind CLI, and it doesn’t support PostCSS anymore, so I felt my decision had been made for me.
Unfortunately, in some cases the WordPress editor was choking on nested CSS, so I needed to switch from @tailwindcss/cli to @tailwindcss/postcss in order to use postcss-nesting.
Maybe there’s such a thing as too few PostCSS plugins
Once I was back in the PostCSS world, I revisited how I was handling the differences in output required for the front end versus the block editor, and I found a solution I’m really happy about using postcss-advanced-variables. This allowed me to simplify the structure of the root tailwind.css file and to reduce the number of files used to generate the final output.
I also brought back postcss-import-ext-glob. In my own projects, I’ve been missing the ability to drop CSS files into ./tailwind/custom/components and have them automatically be recognized; now this works once again.
I think both of these changes greatly improve the developer experience, and I’m committed to never again removing dependencies at the cost of a clunkier experience working with _tw.
Tailwind Typography reaches its final JavaScript state
Pretty soon, Tailwind Typography will be going CSS-first. I think that is going to be great! But for now, I wanted to make some changes to _tw’s Tailwind Typography fork:
- Disable heading levels not supported by Tailwind Typography (
h5–h6) - Add support for all elements with styles in Tailwind typography
- Improve support for Advanced Custom Fields blocks
While removing support for h5 and h6, I also removed h1 from the post editor since your post or page title should be your h1 element, and you should only have one. (But you can change this in ./theme/functions.php if you disagree!)
In terms of element support, I fixed the padding surrounding captions below images, and I finalized support for tables, with dashed grid lines showing the divisions between columns in the editor, and Tailwind’s own styles on the front end.
Finally, I’d received some requests over the years for improvements to styling within ACF blocks, and I’ve made those changes.
That’s it for now! I’m strongly considering a skippable advanced settings page in the generator, with options for setting colours and choosing which heading levels to support, amongst other things; that might end up being my next project.