Generate a theme built for Tailwind
The _tw generator creates a WordPress starter theme optimized for modern development with Tailwind CSS, Tailwind Typography and the WordPress editor.
It’s the fastest and easiest way to use Tailwind with WordPress!
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.
Build faster
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.
Tailwind, Pre-Configured
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
JIT-Compatible
Updated with fresh build commands for Tailwind 3’s just-in-time compiler
Bundle All the JavaScript
Hit the ground running with JavaScript bundling via esbuild
Quick Builds
Create an upload-ready theme archive with a single command
Quickstart
Install, develop and deploy
Get started quickly, and deploy to production sooner than you expect.
- Installation
- Generate your theme
- Unzip the theme archive
- Move the resulting folder to
wp-content/themes
in your local development environment - Run
npm install && npm run dev
in the moved folder - Activate the theme in WordPress
- Development
- Run
npm run watch
- Add Tailwind utility classes with abandon
- Run
- Deployment
- Run
npm run bundle
- Upload the resulting zip file to your site using the “Upload Theme” button on the “Add Themes” administration page
- Run
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 post a new discussion on GitHub, and I’ll do my best to help!