Now easier to install and updated for Tailwind 3.1! Learn more

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!

Advanced Options

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.

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
  1. Generate your theme
  2. Unzip the theme archive
  3. Move the resulting folder to wp-content/themes in your local development environment
  4. Run npm install && npm run dev in the moved folder
  5. Activate the theme in WordPress
Looking for live reloading? Learn how to add Browsersync to your project.
Development
  1. Run npm run watch
  2. Add Tailwind utility classes with abandon
See the complete development documentation for more details.
Deployment
  1. Run npm run bundle
  2. 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?
While _s is no longer actively maintained, Automattic continues to update Varia, their internal successor to _s. Those 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!