Learn how to get the most out of the Draft WordPress theme.
Grab a copy of the Draft WordPress theme:
Login to your WordPress site:
Go to Appearance > Themes > Add New > Upload Theme
The structure of your WordPress site is made up of 2 critical elements, template-parts & templates.
Template-parts define certain global/reusable parts of your WordPress site, such as the header and footer. At the very least, you’re probably going to need a header and footer.
Templates define the layout and structure of parts of your website, such as website pages or a blog posts. Templates can be composed of template-parts.
Add Template Parts
Since the Draft WordPress theme doesn’t ship with any template-parts, we’ll have to add them.
You can either create these from scratch, or ( this is what we do ) head on over to the Draft block pattern library to grab ready-to-use, responsive template-parts.
To add template-parts to your site:
Go to Appearance > Template Parts > Add New
Since the Draft WordPress theme doesn’t ship with any templates, we’ll have to add them.
For example, a page template might be made up of header and footer template-parts. Content then would more than likely go between these header and footer template-parts. The template would then serve as a template from which this page structure is defined.
Go to Appearance > Editor > Templates > Add New
The Draft WordPress theme ships with almost no styles, all the styling is going to be driven by utility classes.
Since the Draft theme ships without any styles, you’re going to have to configure the utility classes and apply them to site elements.
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 by first globally @apply-ing Tailwind CSS utility classes to blocks and site elements.
The mental model we use for building WordPress sites with Tailwind CSS
Configure Tailwind CSS
Quickly create a Design System for your WordPress site by configuring Tailwind CSS utility classes, without leaving WordPress.
Globally @apply Tailwind CSS
Globally apply Tailwind CSS utility classes to Gutenberg blocks, or any other HTML element, using the Tailwind CSS @apply directive.
Add utility classes to blocks
Beautify any Gutenberg block by adding responsive, stateful, Tailwind CSS utility classes to blocks in the WordPress block editor.
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.
Finally, once you’ve got your blocks styled you can toggle from development to production mode to purge any unused styles sitewide.