MCP serverRespira Exhale for Tailwind CSS · the HTML to WordPress converter
Tailwind CSS to WordPress, with the design.
A page styled with Tailwind becomes a real page in your builder's own blocks, looking the way the file looks.
Why it used to come out plain
The design was in a script that WordPress never runs.
Ask ChatGPT, Claude or an AI design tool for a page and it often styles it with Tailwind loaded from a CDN script. That page has no stylesheet of its own. The script reads every class on the page and writes the CSS in the visitor's browser, at the last moment.
WordPress does not run a page's scripts, and a page builder cannot either. So a Tailwind page arrived as words and images with none of its design: default fonts, blue links, no layout.
<!-- what the file brings -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { theme: { extend: {
colors: { clay: '#b4643c', moss: '#4f6146' },
fontFamily: { display: ['Fraunces', 'serif'] },
} } }
</script>
<body class="bg-sand text-ink font-sans">
<h1 class="font-display text-6xl lg:text-8xl">
Spaces that <em class="text-moss">breathe</em>.
</h1>Respira Exhale now does the browser's job first. It compiles the CSS from the page's own Tailwind setup, places it in the page as a real stylesheet, and only then builds the page in your builder's blocks. The compile runs on respira.press, in memory, and the page is not stored.
What it reads
Everything the script would have read.
The Play CDN, Tailwind 3
The cdn.tailwindcss.com script, the plugins named in its address (forms, typography, container queries) and the page's tailwind.config, whether it is written as JSON or as a plain object.
The Tailwind 4 browser build
The @tailwindcss/browser script with the theme in a text/tailwindcss style block: @theme colours and fonts, @apply, and the forms and typography plugins.
Your own components
Classes you wrote with @apply in a text/tailwindcss block are compiled with the rest, so a .btn stays a .btn.
Fonts and icon fonts
Google Fonts become font-face rules on the page. Material Symbols and Material Icons show as icons, not as the words behind them.
Classes on body and html
The background, base font and text colour an AI puts on the body tag, and a dark class on html, reach the WordPress page.
Every breakpoint and state
md: and lg: layouts, hover, focus and dark variants come along as real CSS, scoped to that one page.
Into the builder you already run
Real blocks, editable next month.
The page is written in the builder's own sections, containers and widgets, not pasted into one HTML block. You open it in the builder and change a headline like any page you made by hand.
- Elementor
- Divi
- Bricks
- Gutenberg
- Kadence Blocks
- Breakdance
- Oxygen
- Beaver Builder
- WPBakery
- Spectra
- GenerateBlocks
- and the rest
Measured, not promised
Checked in a browser, pixel by pixel.
Three ways to run it
From a browser tab, a chat or your own AI.
- On respira.press. Drop the file in Respira Exhale. The first page on the sandbox needs no account; on your own site it is a page in your builder seconds later.
- In Respira AER. Attach the file to a message and ask for the page. The same converter runs on the site you pick.
- From Claude, ChatGPT or Cursor. Connected through Respira, your AI calls
convert_html_to_builderwith the file. From plugin 9.3.13 the Tailwind CSS is compiled on the way, with your site's Respira licence.
Questions
Tailwind to WordPress, answered.
Can I convert a Tailwind page into WordPress?
Yes. Respira Exhale, the HTML to WordPress converter, takes a page styled with Tailwind and builds it in your page builder's own blocks: Elementor, Divi, Bricks, Gutenberg, Kadence and the other supported builders. A page that loads Tailwind from its CDN script has its CSS compiled from the page's own Tailwind setup first, so it arrives with its design.
Why did my Tailwind page come out unstyled before?
A page that loads Tailwind from cdn.tailwindcss.com or the Tailwind 4 browser build has no stylesheet of its own. A script builds the CSS in the visitor's browser. WordPress never runs that script, so the classes meant nothing and the page converted with its words and none of its design. Respira Exhale now builds that CSS before it converts.
Does the Tailwind script run on my WordPress site?
No. Scripts are removed from the page before conversion. The CSS the script would have built is compiled on respira.press and placed in the page as a stylesheet, scoped to that page only.
Is my page stored when its CSS is compiled?
No. The page is compiled in memory and not stored. The tailwind.config is read as data and never run.
Which Tailwind versions work?
The Play CDN script (Tailwind 3) with its tailwind.config and plugins, and the Tailwind 4 browser build with @theme. A page built with the Tailwind CLI already carries its CSS and converts like any other HTML page.
What if my tailwind.config uses JavaScript?
A config written as JSON or as a plain object is read as it is. One that needs JavaScript to be read, such as a function or a reference to another variable, is never run: the page compiles with Tailwind's default theme and the report says so, so you know to check the custom colours and fonts.
Can my AI do this through MCP or Respira AER?
Yes, from Respira for WordPress 9.3.13. When an agent sends a Tailwind CDN page with convert_html_to_builder, the plugin has the CSS compiled first, with the site's Respira licence. The report says it was compiled, or why it could not be.
What does it cost?
Respira Exhale is included in every plan, with 2 pages a month for each site the plan allows. A trial has 10 pages, and the first page on the public sandbox needs no account.
Bring the Tailwind page you already have.
No rewrite into plain CSS, no afternoon rebuilding it by hand.
Tailwind CSS is a trademark of Tailwind Labs Inc. Respira is independent and is not affiliated with or endorsed by Tailwind Labs.
