Turn Tailwind into editable WordPress Block styles – 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... Let me know what you think: I'll…
Turn Tailwind into editable WordPress Block styles – build sites faster launched on March 24, 2024 with 22 votes, #1,126 of 4,270 launches that month and more than 75% of that year's launches. The site was still online in September 2026, 2 years on.
In plain words
This tool converts Tailwind CSS code into editable WordPress Block styles, allowing developers to build sites faster using Tailwind's utility classes while keeping designs editable through WordPress's native Gutenberg block editor. It bridges the gap between Tailwind's rapid development workflow and WordPress's visual editing interface, enabling non-technical users to modify styled layouts with drag-and-drop controls without touching code.
written from the facts on this page · September 2026
From the sources
Tailblocks - Auto-convert Tailwind HTML to WordPress Block code with editable Gutenberg styles. Tailwind to WordPress converter tool/service.
Auto-convert Tailwind HTML to WordPress Block code with editable Gutenberg styles. Let AI filter, score, and show you high-quality freelance jobs that match your preferences. 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. text-* classes support CSS text-align with (right, center, and left), CSS color (e.g. text-red-500 ), and CSS…from upperhorizon.com
In the maker’s words, at launch
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…
Does a similar job
all alternatives →
Tailwind to WordPress Blocks2024 · upperhorizon.com · ▲106Turn Tailwind into editable WP Block styles - develop faster
Tailwind Builder – online editor for the Tailwind CSS framework2019 · tailwind.build · ▲295Save time with the online editor for Tailwind CSS that has a simple, intuitive drag & drop interface and 240+ ready-made UI components.
Tailwind Builder 2.02020 · shuffle.dev · ▲293Online editor & Visual Studio Code extension for TailwindCSS
Open-Source Page Block Builder with Remix and Tailwind CSS2022 · remix-page-blocks.vercel.app · ▲155
Tailwind CSS v2.02020 · tailwindcss.com · ▲385Rapidly build modern websites without ever leaving your HTML
More dev tools this month
the category →
open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.
Dev tools · 27d ago · github.com
Contribute to reladraw/reladraw development by creating an account on GitHub.
Dev tools · 25d ago · github.com
OpenBot▲362Grok Bot alternative: free, local, open-source, multiplayer
Dev tools · 22d ago · openbot.run
Talanoa▲343Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…
Dev tools · 20d ago · talanoa.email
CoreSpeed▲332One MCP for everything your agents need: apps, memory, tools
Dev tools · 28d ago · corespeed.io
Source: Show HN post ↗ · launch text quoted in part
Launched alongside, March 2024
the whole month →
🌐 The Internet Computer! Free, Open-Source, and Self-Hostable. - HeyPuter/puter
Dev tools · 2024 · github.com
Microlaunch▲1,115Launch and get feedback on both the idea and product
Dev tools · 2024 · microlaunch.net
