Quick Start

The Draft plugin empowers you to build beautiful websites fast by adding the powers of Tailwind CSS to the WordPress block editor. Styling your WordPress site is now going to be driven by Tailwind CSS utility classes.

A Familiar Mental Model

When you hear the words “utility classes”, your mental model of utility classes may suggest that these utility classes are applied on an element-by-element, or block-by-block, basis.

While you’ll be adding utility classes to core blocks in the block editor ( as well as any block that supports adding class names ), because of the huge 3rd party plugin ecosystem ( and the variety of block editor integration strategies ), we may not be able to directly add classes to some site elements.

Further, adding utility classes to every block you insert in the block editor doesn’t seem very efficient.

The hope is that with this mental model, you can get your site design ~80%+ of the way there without adding any utility classes directly to blocks.

The mental model we use for building WordPress sites with Tailwind CSS

Configure Tailwind CSS

When it comes to adding styles to your site, the first thing you’ll want to do is configure the Tailwind CSS utility classes.

Since the Draft plugin uses the Tailwind CSS default styles out of the box, you may be able to forgo adding custom values for most utility classes.

The big ones you’ll want to consider customizing are the color and font family utilities. The default color utilities use mostly a black and white palette and the font family defaults are set to use sans-serif system fonts.

Apply Classes Globally

Once you’ve got your utility classes configured, you’ll want to apply classes globally. This allows you to apply utility classes to many of the most important site elements.

Since the Draft theme doesn’t really apply any styles, including responsive styles, this is when you would want to apply responsive utility classes to site elements, such as responsive font sizes for typography elements ( h1…h6, p, link, etc. ) and stateful variants such as hover, focus, active, etc.

Add Utility Classes to Blocks

The hope is that you can get your site design ~80%+ of the way there without adding any utility classes directly to blocks.

To get your site design to 100%, add utility classes to blocks.

Purge CSS

Finally, once you’ve got your blocks styled you can toggle from development to production mode to purge any unused styles sitewide.