TailwindCSS + WordPress = 🤯

Add TailwindCSS to WordPress

A WordPress plugin for devs, hackers & no-coders that makes it easy to quickly build responsive websites, landing pages, mockups or prototypes.

Keep it simple

How It Works

Build beautiful websites faster by adding TailwindCSS utility classes to Gutenberg blocks.

1

1

Insert a Block

Insert a Block

Insert any Gutenberg block that supports adding classes.

Let’s insert a core button block:

1

Insert a Block

Configure TailwindCSS

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

Let’s insert a core button block:

Let’s insert a core button block:

Let’s insert a core button block:

2

2

Add Utility Classes

Add Utility Classes

Beautify any block by adding responsive TailwindCSS utility classes.

Let’s add a healthy border radius, some padding, a custom gradient background, a hover effect, and smaller font sizes on both tablet & mobile:

2

Add Utility Classes

Apply Classes

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

Let’s add a healthy border radius, some padding, a custom gradient background, a hover effect, and smaller font sizes on both tablet & mobile:

Let’s add a healthy border radius, some padding, a custom gradient background, a hover effect, and smaller font sizes on both tablet & mobile:

3

2

Add Utility Classes

Add Utility Classes

Beautify any block by adding responsive TailwindCSS utility classes.

Let’s add a healthy border radius, some padding, a custom gradient background, a hover effect, and smaller font sizes on both tablet & mobile:

!important

Features

The simplicity of adding TailwindCSS utility classes to Gutenberg blocks is great, but don’t we all want a little more control?

All the

Utility Classes

Draft supports all the default TailwindCSS utilities, plus a handful of WordPress specific utilities and variants.

Responsive

To the Core

Add responsive styles to all the core WordPress blocks, plus any other block that supports adding CSS classes.

Configure

TailwindCSS

works witH

Any Theme

While we do have a theme built specifically for Draft in the works, Draft works flawlessly with any WordPress theme for the Gutenberg editor.

Copy & Paste

Block Patterns

Get unlimited access to all of our Ready-to-Use, Responsive block patterns, pages & full websites ( coming soon ).

High

Performance

With Lighthouse Performance scores averaging 98+, you know every page load is blazing fast.

Simple

Import / Export

Supercharge your development workflow by effortlessly Importing / Exporting configuration settings between sites.

ALL The

Google Fonts

Effortlessly creating beautiful Typography is easy with ALL the Google fonts baked into the Draft Pro plugin.

Coming soon

Theme

The COMING SOON Draft block-based theme supports Full-Site-Editing and is the perfect canvas for building your next WordPress site.

Free Plugin

Try out the Free Draft plugin. It comes loaded with responsive utility classes and works with ANY theme.

Free Theme

The Free Draft theme is a SUPER lightweight block-based, full-site-editing theme. Try it out.

Copy & Paste

Block Pattern Library

Build even FASTER with FREE Ready-to-use, Responsive, Copy & Paste-able WordPress block patterns.

Headers

Features

Pricing

Heading

affordable

Pricing

Unlimited TailwindCSS powers in WordPress, teeny-tiny price tag.

unlimited sites

FREE

  • Unlimited Sites
  • Unlimited Free Block Patterns

Unlimited Sites

$199/yr

$99/yr

  • Unlimited Sites License
  • Unlimited Block Patterns

1 Site

$49/yr

  • 1 Site License
  • Unlimited Block Patterns

Are you a

Website Designer or Developer?

We would love to collaborate on creating WordPress website parts, pages, & full sites with anyone ( * developer not required ) who has a passion for building, developing, designing, eating, breathing websites.