I made a tool to convert Tailwind into editable WP Block styles to build sites faster

While building a WordPress website recently…

I realized how tedious and slow it is to fiddle with the WP Block editor UI.

I knew that you could build sites/layouts much faster and easier in Tailwind.

So I wrote a script to convert the Tailwind HTML code into WP Block code:


This means that the utility classes/styles you write can be easily edited by others with the Gutenberg/FSE’s native drag-and-drop editing UI.

Here’s a video to explain more (on ProductHunt): [https://www.producthunt.com/posts/tailwind-to-wordpress-bloc…](https://www.producthunt.com/posts/tailwind-to-wordpress-blocks)

Let me know what you think: I’ll read any and all of your feedback…

1 Comment
  1. Here’s how it works:

    • Build sites/layouts easily, quickly, and efficiently in Tailwind

    • Then convert it to WP Blocks with Gutenberg/FSE-editable styles automatically 🎨

    The result?

    Devs get to write fast/efficient Tailwind code, while non-technical users can still edit them just like native/default Blocks.

    This saved me a lot of time and frustration by accelerating dev speed, productivity, and quality: less code = easy maintenance.

    So I wanted to release it and see if others find it valuable as well.

    Currently the converter is an online tool. But I’m thinking of turning it into a command-line tool that bulk transforms your Tailwind code to WP themes/patterns.

    What do you think?

    If you have any ideas or suggestions, I’d love to hear your thoughts/feedback…


This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer