How to

Apply Classes

Globally applying classes can be a game changer for speeding up and optimizing your workflow.

The ‘Apply Classes’ settings function much like the TailwindCSS @apply directive. You can apply utility classes globally to Typography elements ( such as paragraph tags, links, h1-h6 tags etc. ), Gutenberg blocks ( such as buttons, images, tables, etc. ), HTML elements ( such as buttons, images, etc. ), and to the Body of your website.

While we haven’t surfaced all of each of these categories of elements, we’ve surfaced the ones that give you the most bang for your buck and get you 80-90% of the way there with your site’s design. Couple this with using inline utility classes to take you that last mile.

As we build out more block patterns, pages, and full websites we’ll add more elements to the Apply Classes settings as we uncover workflow productivity gains. Let us know if you have any elements you’d like us to add.

How to Apply Classes

Below are all the global elements you can apply classes to available to.

To edit these in the Draft Pro plugin, you can either:

Click into any block > Go to Advanced > Click Edit Default Settings

Or:

Click the 3 dots > Go to Draft Plugin Settings

Go to Apply Classes

Typography

You can apply TailwindCSS classes to the following Typography elements:

  • Paragraph
  • Link
  • List
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6

In the table below are the selectors ( and depending on the variant used, the selector’s state ) these classes get applied to:

Paragraph default.editor-styles-wrapper p, .wp-site-blocks p {
@apply classes go here;
}
Paragraph :hover.editor-styles-wrapper p:hover, .wp-site-blocks p:hover {
@apply classes go here;
}
Paragraph :child.editor-styles-wrapper p > *, .wp-site-blocks p > * {
@apply classes go here;
}
Paragraph :logged-in.logged-in .editor-styles-wrapper p, .logged-in .wp-site-blocks p {
@apply classes go here;
}
Paragraph space.editor-styles-wrapper p > :not([hidden]) ~ :not([hidden]), .wp-site-blocks p > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
Link default.editor-styles-wrapper a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor), .wp-site-blocks a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor) {
@apply classes go here;
}
Link :hover.editor-styles-wrapper a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor):hover, .wp-site-blocks a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor):hover {
@apply classes go here;
}
Link :child.editor-styles-wrapper a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor) > *, .wp-site-blocks a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor) > * {
@apply classes go here;
}
Link :logged-in.logged-in .editor-styles-wrapper a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor), .logged-in .wp-site-blocks a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor) {
@apply classes go here;
}
Link space.editor-styles-wrapper a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor) > :not([hidden]) ~ :not([hidden]), .wp-site-blocks a:not(.wp-block-button__link):not(.wp-block-navigation-link__content):not(.wp-block-social-link-anchor) > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
List default.editor-styles-wrapper ul li:not(.wp-block-navigation-link):not(.wp-block-post), .wp-site-blocks ul li:not(.wp-block-navigation-link):not(.wp-block-post), .editor-styles-wrapper ol li:not(.wp-block-navigation-link):not(.wp-block-post), .wp-site-blocks ol li:not(.wp-block-navigation-link):not(.wp-block-post) {
@apply classes go here;
}
List :hover.editor-styles-wrapper ul li:not(.wp-block-navigation-link):not(.wp-block-post):hover, .wp-site-blocks ul li:not(.wp-block-navigation-link):not(.wp-block-post):hover, .editor-styles-wrapper ol li:not(.wp-block-navigation-link):not(.wp-block-post):hover, .wp-site-blocks ol li:not(.wp-block-navigation-link):not(.wp-block-post):hover {
@apply classes go here;
}
List :child.editor-styles-wrapper ul li:not(.wp-block-navigation-link):not(.wp-block-post) > *, .wp-site-blocks ul li:not(.wp-block-navigation-link):not(.wp-block-post) > *, .editor-styles-wrapper ol li:not(.wp-block-navigation-link):not(.wp-block-post) > *, .wp-site-blocks ol li:not(.wp-block-navigation-link):not(.wp-block-post) > * {
@apply classes go here;
}
List :logged-in.logged-in .editor-styles-wrapper ul li:not(.wp-block-navigation-link):not(.wp-block-post), .logged-in .wp-site-blocks ul li:not(.wp-block-navigation-link):not(.wp-block-post), .logged-in .editor-styles-wrapper ol li:not(.wp-block-navigation-link):not(.wp-block-post), .logged-in .wp-site-blocks ol li:not(.wp-block-navigation-link):not(.wp-block-post) {
@apply classes go here;
}
List space.editor-styles-wrapper ul li:not(.wp-block-navigation-link):not(.wp-block-post) > :not([hidden]) ~ :not([hidden]), .wp-site-blocks ul li:not(.wp-block-navigation-link):not(.wp-block-post) > :not([hidden]) ~ :not([hidden]),, .editor-styles-wrapper ol li:not(.wp-block-navigation-link):not(.wp-block-post) > :not([hidden]) ~ :not([hidden]), .wp-site-blocks ol li:not(.wp-block-navigation-link):not(.wp-block-post) > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
H1 default.editor-styles-wrapper h1:not(.editor-post-title), .wp-site-blocks h1:not(.editor-post-title) {
@apply classes go here;
}
H1 :hover.editor-styles-wrapper h1:not(.editor-post-title):hover, .wp-site-blocks h1:not(.editor-post-title):hover {
@apply classes go here;
}
H1 :child.editor-styles-wrapper h1:not(.editor-post-title) > *, .wp-site-blocks h1:not(.editor-post-title) > * {
@apply classes go here;
}
H1 :logged-in.logged-in .editor-styles-wrapper h1:not(.editor-post-title), .logged-in .wp-site-blocks h1:not(.editor-post-title) {
@apply classes go here;
}
H1 space.editor-styles-wrapper h1:not(.editor-post-title) > :not([hidden]) ~ :not([hidden]), .wp-site-blocks h1:not(.editor-post-title) > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
H2 default.editor-styles-wrapper h2, .wp-site-blocks h2 {
@apply classes go here;
}
H2 :hover.editor-styles-wrapper h2:hover, .wp-site-blocks h2:hover {
@apply classes go here;
}
H2 :child.editor-styles-wrapper h2 > *, .wp-site-blocks h2 > * {
@apply classes go here;
}
H2 :logged-in.logged-in .editor-styles-wrapper h2, .logged-in .wp-site-blocks h2 {
@apply classes go here;
}
H2 space.editor-styles-wrapper h2 > :not([hidden]) ~ :not([hidden]), .wp-site-blocks h2 > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
H3 default.editor-styles-wrapper h3, .wp-site-blocks h3 {
@apply classes go here;
}
H3 :hover.editor-styles-wrapper h3:hover, .wp-site-blocks h3:hover {
@apply classes go here;
}
H3 :child.editor-styles-wrapper h3 > *, .wp-site-blocks h3 > * {
@apply classes go here;
}
H3 :logged-in.logged-in .editor-styles-wrapper h3, .logged-in .wp-site-blocks h3 {
@apply classes go here;
}
H3 space.editor-styles-wrapper h3 > :not([hidden]) ~ :not([hidden]), .wp-site-blocks h3 > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
H4 default.editor-styles-wrapper h4, .wp-site-blocks h4 {
@apply classes go here;
}
H4 :hover.editor-styles-wrapper h4:hover, .wp-site-blocks h4:hover {
@apply classes go here;
}
H4 :child.editor-styles-wrapper h4 > *, .wp-site-blocks h4 > * {
@apply classes go here;
}
H4 :logged-in.logged-in .editor-styles-wrapper h4, .logged-in .wp-site-blocks h4 {
@apply classes go here;
}
H4 space.editor-styles-wrapper h4 > :not([hidden]) ~ :not([hidden]), .wp-site-blocks h4 > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
H5 default.editor-styles-wrapper h5, .wp-site-blocks h5 {
@apply classes go here;
}
H5 :hover.editor-styles-wrapper h5:hover, .wp-site-blocks h5:hover {
@apply classes go here;
}
H5 :child.editor-styles-wrapper h5 > *, .wp-site-blocks h5 > * {
@apply classes go here;
}
H5 :logged-in.logged-in .editor-styles-wrapper h5, .logged-in .wp-site-blocks h5 {
@apply classes go here;
}
H5 space.editor-styles-wrapper h5 > :not([hidden]) ~ :not([hidden]), .wp-site-blocks h5 > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
H6 default.editor-styles-wrapper h6, .wp-site-blocks h6 {
@apply classes go here;
}
H6 :hover.editor-styles-wrapper h6:hover, .wp-site-blocks h6:hover {
@apply classes go here;
}
H6 :child.editor-styles-wrapper h6 > *, .wp-site-blocks h6 > * {
@apply classes go here;
}
H6 :logged-in.logged-in .editor-styles-wrapper h6, .logged-in .wp-site-blocks h6 {
@apply classes go here;
}
H6 space.editor-styles-wrapper h6 > :not([hidden]) ~ :not([hidden]), .wp-site-blocks h6 > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}

Blocks

You can apply TailwindCSS classes to the following Gutenberg Blocks:

  • Button
  • Navigation Link
  • Image
  • Featured Image
  • Columns
  • Column
  • Table

In the table below are the selectors ( and depending on the variant used, the selector’s state ) these classes get applied to:

Button default.wp-block-button {
@apply classes go here;
}
Button :hover.wp-block-button:hover {
@apply classes go here;
}
Button :child.wp-block-button > * {
@apply classes go here;
}
Button :logged-in.logged-in .wp-block-button {
@apply classes go here;
}
Button space.wp-block-button > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
Navigation Link default.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-link, .wp-site-blocks .wp-block-navigation .wp-block-navigation-link {
@apply classes go here;
}
Navigation Link :hover.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-link:hover, .wp-site-blocks .wp-block-navigation .wp-block-navigation-link:hover {
@apply classes go here;
}
Navigation Link :child.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-link > *, .wp-site-blocks .wp-block-navigation .wp-block-navigation-link > * {
@apply classes go here;
}
Navigation Link :logged-in.logged-in .editor-styles-wrapper .wp-block-navigation .wp-block-navigation-link, .logged-in .wp-site-blocks .wp-block-navigation .wp-block-navigation-link {
@apply classes go here;
}
Navigation Link space.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-link > :not([hidden]) ~ :not([hidden]), .wp-site-blocks .wp-site-blocks .wp-block-navigation .wp-block-navigation-link > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
Image default.wp-block-image {
@apply classes go here;
}
Image :hover.wp-block-image:hover {
@apply classes go here;
}
Image :child.wp-block-image > * {
@apply classes go here;
}
Image :logged-in.logged-in .wp-block-image {
@apply classes go here;
}
Image space.wp-block-image > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
Featured Image default.wp-block-post-featured-image {
@apply classes go here;
}
Featured Image :hover.wp-block-post-featured-image:hover {
@apply classes go here;
}
Featured Image :child.wp-block-post-featured-image > * {
@apply classes go here;
}
Featured Image :logged-in.logged-in .wp-block-post-featured-image {
@apply classes go here;
}
Featured Image space.wp-block-post-featured-image > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
Columns default.wp-block-columns {
@apply classes go here;
}
Columns :hover.wp-block-columns:hover {
@apply classes go here;
}
Columns :child.wp-block-columns > * {
@apply classes go here;
}
Columns :logged-in.logged-in .wp-block-columns {
@apply classes go here;
}
Columns space.wp-block-columns > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
Column default.wp-block-column {
@apply classes go here;
}
Column :hover.wp-block-column:hover {
@apply classes go here;
}
Column :child.wp-block-column > * {
@apply classes go here;
}
Column :logged-in.logged-in .wp-block-column {
@apply classes go here;
}
Column space.wp-block-column > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}
Table default.wp-block-table {
@apply classes go here;
}
Table :hover.wp-block-table:hover {
@apply classes go here;
}
Table :child.wp-block-table > * {
@apply classes go here;
}
Table :logged-in.logged-in .wp-block-table {
@apply classes go here;
}
Table space.wp-block-table > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}

Elements

You can apply TailwindCSS classes to the following HTML Elements:

  • Button

In the table below are the selectors ( and depending on the variant used, the selector’s state ) these classes get applied to:

Button default.editor-styles-wrapper button:not(.components-button), .wp-site-blocks:not(.is-root-container) button {
@apply classes go here;
}
Button :hover.editor-styles-wrapper button:not(.components-button):hover, .wp-site-blocks:not(.is-root-container) button:hover {
@apply classes go here;
}
Button :child.editor-styles-wrapper button:not(.components-button) > *, .wp-site-blocks button > * {
@apply classes go here;
}
Button :logged-in.logged-in .editor-styles-wrapper button:not(.components-button), .logged-in .wp-site-blocks button {
@apply classes go here;
}
Button space.editor-styles-wrapper button:not(.components-button) > :not([hidden]) ~ :not([hidden]), .wp-site-blocks button > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}

Layout

The ‘Layout’ settings work a little differently. Here you can adjust the following sitewide layout settings:

  • Content Size ( default content width for blocks )
  • Wide Size ( for blocks with wide alignment )
  • Gutter ( gutter for pages )

In the table below are the default values for each of these settings:

Content Size45rem
Wide Size80 rem
GutterDesktop ( 2rem )
Tablet ( 2rem )
Mobile ( 1rem )

Body

You can apply TailwindCSS classes to the websites ‘body’ tag for doing things such as applying background colors, body text colors & sizing, borders, padding, etc.

In the table below are the selectors ( and depending on the variant used, the selector’s state ) these classes get applied to:

Body default.editor-styles-wrapper, body:not(.wp-admin) {
@apply classes go here;
}
Body :hoverbody:not(.wp-admin):hover, .editor-styles-wrapper:hover {
@apply classes go here;
}
Body :childbody:not(.wp-admin) > *, .editor-styles-wrapper > * {
@apply classes go here;
}
Body :logged-inbody:not(.wp-admin).logged-in, .logged-in .editor-styles-wrapper {
@apply classes go here;
}
Body spacebody:not(.wp-admin) > :not([hidden]) ~ :not([hidden]), .editor-styles-wrapper > :not([hidden]) ~ :not([hidden]) {
@apply classes go here;
}