Pricing

How to

Plugin Quick Start

The Draft Pro plugin empowers you to build beautiful websites fast by adding TailwindCSS utility classes to Gutenberg blocks. Styling your WordPress site is now going to be driven by utility classes.

A New 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 can easily add utility classes to any core block in the block editor, 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 many site elements.

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

Here’s the mental model we use:

1

Configure TailwindCSS

Quickly create a Design System for your WordPress site by configuring TailwindCSS utility classes.

2

Apply Classes

Globally apply TailwindCSS classes to Typography elements, Gutenberg blocks, & HTML elements – much like the TailwindCSS @apply directive.

3

Add Utility Classes

Beautify any Gutenberg block by adding responsive TailwindCSS utility classes in the block editor.

Configure TailwindCSS

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

Since the Draft plugin uses the TailwindCSS 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. ).

Add Utility Classes to Blocks

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

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