0.1.3-beta

Tailblocks

Auto-convert Tailwind HTML to WordPress Block code with editable Gutenberg styles.

Give Feedback

I'm building a tool that shows freelancers best-fit projects tailored to them

Let AI filter, score, and show you high-quality freelance jobs that match your preferences.

Join the Waitlist

Wait, but why?

By writing WordPress theme Block/Pattern code in plain HTML and Tailwind, developers can build out complex designs and sites very quickly.

It's much faster and more efficient than fiddling with the Gutenberg/drag-and-drop editor UI or writing WP Block code.

You can use this tool to transform your Tailwind code into WP Block code so non-technical people can easily edit the styles afterward in Gutenberg.

Supported Utility Classes

Flexbox

flexflex-nowrapflex-colbasis-0basis-1/12basis-2/12basis-3/12basis-4/12basis-5/12basis-6/12basis-7/12basis-8/12basis-9/12basis-10/12basis-11/12basis-fulljustify-startjustify-centerjustify-endjustify-betweenitems-startitems-centeritems-enditems-stretchgap-*

Margin/padding

m-*mt-*mb-*ml-*mr-*mx-*my-*p-*pt-*pb-*pl-*pr-*px-*py-*

Text, borders, backgrounds

text-*bg-*font-*border-*rounded-*

text-* classes support CSS text-align with (right, center, and left), CSS color (e.g.text-red-500), and CSS font-size (e.g.text-sm).

bg-* classes only support CSS background-color.

font-* classes support CSS font-weight as a number (e.g. font-100, font-900) and font-family.

border-* classes support CSS border-color (e.g. border-red) and border-width (e.g. border-1px, border-3rem; a unit must be specified).

rounded-* classes need to have a unit specified (e.g. rounded-2px, rounded-4rem).

WordPress-specific

I've also added some classes that control styles specific to the Gutenberg editor:

a-full, a-wide: Align Full and Wide

l-constrained: Layout Constrained

cs-*: Content Size (e.g. cs-600px)

ws-*: Wide Size (e.g. ws-1200px)

WordPress Columns Block:

<div class="cols cols-nostack">
  <div class="basis-4/12">...</div>
  <div class="basis-8/12">...</div>
</div>

WordPress Buttons Block:

<div class="btns">
  <div class="btn">
    <a class="btn-link">Contact Us</a>
  </div>
</div>

Why Color Names Are Needed

In Tailwind, many classes style different CSS properties but start with the same prefix.

Like text-red which sets CSS color but text-sm sets CSS font-size.

For the converter to know which is which, you should provide a list of your color names/slugs/tokens you're using in Tailwind and WordPress:

red, dark-100, purple-200, purple-500

Known Limitations

Due to WordPress's inconsistent Block code structure/system, some classes on Column(s) and Button(s) Blocks don't work properly.

I eventually may fix these issues. If you find any other bugs or have questions/suggestions, I'd love to hear your feedback and ideas:

Email me at [email protected]