I'm a full-stack developer with 10+ years of experience. I use Angular on the frontend. I faced an issue that I experience in my everyday routine, even when I have powerful tools like Codex.

Refactoring old UI to a new frontend was painful for me. I can vibe-code complex business logic, but I can't pull markup pixel-perfect into a new codebase in seconds. Put screenshots to the Codex and have 80% confidence output + time for editing it - this is the bottleneck for me.

I built a Chrome extension that converts any interface into plain Tailwind HTML. It began as my personal tool, which I use to pull plain Tailwind into a new codebase. Then it turned out that it's not that simple: the web has a lot of markup cases, pseudo-elements, complex gradients, SVGs, authored styling priorities, etc.

It turned out that I built something big, and I wanted to share my pain and solution with you. Also, the inspiration that today it's possible to build tool in one month. Eventually, people will solve their pain as you solve yours.

Few insights about my extension:

• 95% code wrote AI
• 700+ commits created
• 40~ commits daily
• 400+ regression tests
• Developed in 1 month
• Automated self-learning
• Automated regression testing
• Automated parallelism for scheduled testing/learning
• Keeps improving every day
• First buy from guy I don't know, but feel thankful for him very much!

What the purpose:

• Refactor legacy UI without changing it appearance
• Pull any good UI element from any website, or even whole website
• Use this as the entry point for your AI - agents are understanding Tailwind better than screenshots
• Convert any AI output with inline styles, dirty code to plain Tailwind
• Customer wants like in that WOW website - got it, pull and paste to your project

Now I can pull whole Github page and convert it to Tailwind html in seconds, which is not Tailwind based and obfuscated.

Also, I made a few simple tools that help convert existing code to Tailwind. They're support preview, fullscreen, really complex sources. Also they have responsive support, so you can shrink your side window and use them in parallel. They're completely free, enjoy!

HTML/CSS to Tailwind:
https://tailfind.org/html-css-to-tailwind

CSS to Tailwind:
https://tailfind.org/css-to-tailwind

Bootstrap to Tailwind:
https://tailfind.org/bootstrap-to-tailwind

Now I want to add output configuration, like apply prefixes, units (px/rem), etc..

Would love to hear your feedback or suggestions for improvement.