HN Explorer

Show HN: Turn Tailwind into editable WordPress Block styles – build sites faster (upperhorizon.com)

22 points by kittenchief ↗ HN
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...

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

5 comments

[ 3.1 ms ] story [ 19.5 ms ] thread
kittenchief
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.

Thanks, - Ab

tamiral
i love this ! thank you for doing this, i was looking at creating a figma to tailwind to wordpress for a project im working on!
ctrlcrshr
This is great! Gutenberg is the builder I seem fastest with, but still not as quick or nice as being able to raw code. This bridges that gap! I will absolutely plan to try this out on my next pages.

One initial thought is, I tend to use GenerateBlocks containers and headlines. So I'd want to be able to convert the resulting blocks into GB blocks.

Not sure the complexity of that, but that would be my particular workflow!

Great idea!

felixhirschfeld
Dude! awesome. I use TailPress plugin in my WordPress sites but thats really cool!