Media
1 item
Description
Integrates an HTML to JSON converter into the Divhunt editor. Seamlessly copy-paste HTML and Tailwind CSS templates directly into the Divhunt visual builder. **HTML & Tailwind to Divhunt Converter** is the ultimate workflow bridge between the world's most popular CSS framework and the Divhunt visual site builder. Simply copy any HTML snippet, Tailwind template, or raw HTML block from the web, and paste it directly into your Divhunt project canvas. The extension automatically parses the code and translates it into native Divhunt elements, classes, and responsive styles on the fly! ### Key Features: 🚀 **Built-in Tailwind JIT Compiler:** Paste pure Tailwind HTML classes, and the extension will compile them in real-time inside your browser. No Node.js environment or build steps required! ✨ **Intelligent Responsive Mapping:** The converter perfectly translates Tailwind's "Mobile-First" (`min-width`) breakpoints into Divhunt's native "Desktop-First" (`max-width`) engine. Your columns, flex layouts, and typography will look pixel-perfect and respond identically across desktop, tablet, and mobile. 🎨 **Inline Style Optimization:** To prevent your Divhunt global class dictionary from being polluted with hundreds of utility classes, Tailwind classes are elegantly compiled and applied as native inline element styles. Your project remains clean, organized, and blazing fast. 🛠️ **Smart Property Handlers:** Automatically converts modern CSS features (like Color Level 4 syntax `rgb(r g b / a)`) and separate border rules into Divhunt-friendly shorthands. Any complex Tailwind CSS variables, filter utilities, or inline SVGs are safely preserved via Divhunt's Custom CSS field. 🔄 **Cross-Project Convenience:** Once installed, the converter is seamlessly integrated into your Divhunt environment and works across all your projects simultaneously without needing per-project configuration. 🎛️ **Quick Toggle:** If you temporarily don't need the conversion features, you can easily disable or enable the extension globally right from the extension's popup menu. ### How to use: 1. Copy any HTML snippet or Tailwind CSS template (from platforms like Tailwind UI, Flowbite, etc.). 2. Open your project in the Divhunt Builder. 3. Select any element or container on your canvas where you want to paste the code. 4. Click on the **Converter Icon** that appears in the top navigation panel of Divhunt. 5. Paste your copied code into the window that appears. 6. A progress bar will indicate the Tailwind compilation status. Within seconds, your fully-styled elements will appear perfectly on the canvas! Whether you are migrating an old website to Divhunt, or just want to leverage the massive open-source ecosystem of Tailwind components to speed up your design process, this extension is a must-have time-saver for Divhunt developers and designers.