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 possible to build modern websites in less time. (The Tailwind homepage does a great job explaining the rest.) 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-built CSS file in two commands
Your WordPress 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 for Tailwind 3’s just-in-time compiler
Create an upload-ready theme archive with a single command
Install, develop and deploy
Get started quickly, and deploy to production sooner than you expect.
- Generate your theme
- Unzip the theme archive
- Move the resulting folder to
wp-content/themesin your local development environment
npm install && npm run devin the moved folder
- Activate the theme in WordPress
npm run watch
- Add Tailwind utility classes with abandon
npm run bundle
- Upload the resulting zip file to your site using the “Upload Theme” button on the “Add Themes” administration page
Questions & Answers
- Who is this for?
- This starter theme began as a fork of _s, adding first-class support for Tailwind CSS. _tw lets WordPress developers add Tailwind to their workflow while otherwise diverging as little as possible from longstanding WordPress theme development practices. 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?
- Once it was clear _s would no longer be maintained, I began merging updates into _tw from Varia, Automattic’s internal successor to _s. These two themes have been battle tested over more than a decade, and they’re easy to learn. Projects like Sage and Timber make integrating Tailwind fairly straightforward, but they come with a corresponding learning curve for traditional WordPress theme developers that makes starting with _tw 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, 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 _tw make sense once full-site editing becomes stable?
- 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 into a subset of FSE features. _tw already supports theme.json files, and I look forward to supporting more elements of FSE in the future.
- Have more questions?
- Please mention @gregsvn on Twitter, and I’ll do my best to help!