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

See the complete installation documentation for more details.

Development: Run npm run watch
Add Tailwind utility classes with abandon

Looking for live reloading? Learn how to add Browsersync to your project.

Deployment: Run npm run bundle
Upload the resulting zip file to your site using the “Upload Theme” button on the “Add Themes” administration page

Or deploy with the tool of your choice!

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!