What is Tailwind, and why does it
belong in a WordPress theme?
Tailwind is a “utility-first css framework ... that can be composed to build any design, directly in your markup,” and it makes it easier to build modern websites in less time. (The Tailwind homepage does a great job explaining the rest.) And if you’re utility-class–hesitant, Tailwind creator Adam Wathan has written a blog post to help you through your fears.
A bespoke theme in less time
Ideal for pixel-perfect conversions of designs created in applications like Figma, Sketch or Illustrator, and ready for development in minutes.
From download to a Tailwind-compiled style.css file in two commands.
Your Editor of Choice
Preview styles in the block editor, the classic editor and ACF WYSIWYG fields.
Ready for theme.json
Enter colors and widths in your theme.json file for immediate access via Tailwind.
Updated with fresh build commands ready for Tailwind 3’s just-in-time compiler.
Custom Folder Structure
Keep your theme repository organized with a nested theme folder.
Create an upload-ready theme archive with a single command.
Questions & Answers
- Who is this for?
- The goal of this starter theme is to maintain parity with the latest commit of _s while also adding first-class support for Tailwind. Not diverging significantly from _s provides WordPress developers familiar with that starter theme a head start using Tailwind. I use this starter theme primarily for client and agency work, creating WordPress themes from a designer’s mockups. I used it for this site, too.
- Is _s the best foundation for _tw?
- For the time being, _s is still as close as we have to a canonical WordPress starter theme. It’s been battle-tested over nearly a decade, and it’s easy to learn. Something like Sage or Timber makes integrating Tailwind fairly straightforward, but the learning curve for traditional WordPress theme developers makes starting with _s an easier lift.
- Why generate a theme from a website?
- Theme generators have saved me countless hours over the years, and _tw began as a fork of the underscores.me generator. I was first motivated to resolve some outstanding issues with the generator that have yet to be fixed, and then I modified it to use my preferred directory structure. When I started using Tailwind for all my client work, I updated the generator accordingly.
- Will using _s make sense once full-site editing launches?
- Full-site editing is the future of WordPress and will be a huge benefit to its users. That said, I think there will continue to be space for hybrid themes that make full use of the block editor for posts while opting out of some or all of fse. I suspect and hope that _s will be updated to support theme.json files in the future. (In the meantime, I’ve updated _tw to support them.)
- What’s going on with the directory structure?
- After years of using _s as my starter theme, I found I was more productive when I organized my repository to contain the theme itself in a subfolder, with all of the items related to—but not part of—the finished theme in the root folder. I provide more detail on setting up your development environment in the documentation.
- Have more questions?
- Please mention @gregsvn on Twitter, and I’ll do my best to help!