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 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 ( 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 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 for building WordPress sites with Tailwind CSS:
1
Configure Tailwind CSS
Quickly create a Design System for your WordPress site by configuring Tailwind CSS utility classes.
2
Apply Classes
Globally apply Tailwind CSS classes to any HTML element & Gutenberg block using the Tailwind CSS @apply directive.
3
Add Utility Classes
Beautify any Gutenberg block by adding responsive, stateful, Tailwind CSS utility classes in the WordPress block editor.
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-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.