↔️HTML with Tailwind

Paste HTML with Tailwind CSS classes and convert utilities into Webstudio styles.

You can paste HTML with Tailwind CSS classes into Webstudio and convert the utility classes into native Webstudio styles.

For general Tailwind HTML, use the Paste HTML with Tailwind classes command:

1. Copy HTML containing Tailwind classes, such as <div class="flex items-center gap-4 p-6 bg-white rounded-lg">

2. Open Commands & search with ⌘ + K (Ctrl + K on Windows)

3. Search for Paste HTML with Tailwind classes

4. Run the command

Paste HTML with Tailwind classes command

HTML/Tailwind output copied from Inception can also be pasted directly into the Builder.

If the pasted HTML references image URLs, Webstudio uploads those images into Assets and rewrites the pasted image instances to use the uploaded assets.

Related

• HTML with CSS – Paste HTML containing <style> blocks

• Referenced images – Understand image handling during paste

• Commands & search – Learn how to run commands from the keyboard

• Inception – Copy HTML/Tailwind output from Inception