Tailwind pages now reach WordPress with their design

Ask an AI for a landing page and there is a good chance it styles it with Tailwind, loaded from a script. That page looks finished in the browser. Dropped into a WordPress converter, it used to come out as a column of plain text and blue links, every word present and none of the design. As of today Respira Exhale, the HTML to WordPress converter, brings the design along.

Why a Tailwind page arrived bare

A page that loads Tailwind from cdn.tailwindcss.com, or the newer Tailwind 4 browser build, has no stylesheet in it. It has classes, hundreds of them, and a script that reads those classes when the page opens and writes the CSS in the visitor's browser. WordPress never runs a page's scripts, and a page builder cannot either. So the classes meant nothing on the way in.

Respira's converter saw this and said so in its report: the page is styled by a script that does not run here, it will convert unstyled. Honest, and no use to someone holding a page they liked.

The email that made it urgent

On Wednesday a designer on a trial sent a page that had converted with nothing but its text. A personal project with many pages, each designed with an AI tool, each exported the same way. The same day a second customer sent a page built the same way. Both files were Tailwind pages, loaded from the CDN, with their colours and fonts in an inline tailwind.config.

What Respira Exhale does now

It does the browser's job before it converts. It reads the page's own Tailwind setup and compiles the CSS that script would have written, then places it in the page as a real stylesheet, and only then builds the page in your builder's blocks. From there the page goes through fidelity mode like any other: the stylesheet scoped to that one page, every class on the element the builder renders.

• Tailwind 3 from the Play CDN, with the page's tailwind.config, written as JSON or as a plain object, and the forms, typography and container-queries plugins named in the script address.
• The Tailwind 4 browser build, with its @theme colours and fonts and its plugins.
• Your own components written with @apply in a text/tailwindcss block.
• Every breakpoint and state: md: and lg: layouts, hover and focus, dark variants.

The compile runs on respira.press, in memory. The page is not stored, and the config is read as data, never run. A config that needs JavaScript to be read, a function or a reference to another variable, falls back to Tailwind's default theme, and the report tells you so you know to check the colours.

Every door, not only the dashboard

The dashboard and the public sandbox on the Respira Exhale page compile Tailwind pages already. With Respira for WordPress 9.3.13, released today, so does the plugin itself: when your AI sends a Tailwind page through MCP, or you attach one in Respira AER, the site has the CSS compiled first, with its Respira licence. If that cannot happen, say there is no network, the page converts as it did before and the report says why.

What else came along

Taking that designer's page apart showed three more places where a page lost a little of itself. All three are fixed in 9.3.13, for every page, Tailwind or not.

• Icon fonts. Material Symbols showed as the words behind them, so a badge read "verified" instead of showing a check. Google serves those fonts in a way the converter used to skip, and their class rule was then switched off by the page's own reset. Both are carried now.
• Classes on the body tag. AI pages put the background, the base font and the text colour on <body>. Those classes matched nothing on WordPress. They reach the page now, and so do rules for an <html class="dark"> page.
• The room under a fixed header. A <main> with its own padding lost it, so the hero slid under the menu. It keeps it now, and a footer that holds only text no longer gets its padding twice.

How close it lands

Measured in a browser, pixel by pixel. A Tailwind 4 test page with Respira's compiled CSS is identical to the same page in the live browser build: zero pixels different at desktop and at phone width. The designer's page, converted through the plugin, comes out the same height as the original to the pixel, with 0.01% of its pixels different in Elementor and the same in Kadence, the builder they use. Before release, eight test pages on six builders were converted with 9.3.12 and 9.3.13 and compared, and the only differences were the fixes above.

Try it

Open the Respira Exhale sandbox, drop your Tailwind file as it is, pick a builder. The first page needs no account. On your own site, Respira Exhale is included in every plan, with 2 pages a month for each site the plan allows. Everything about Tailwind in one place is on Tailwind to WordPress.

Mihai

Tailwind CSS is a trademark of Tailwind Labs Inc. Respira is independent and is not affiliated with or endorsed by Tailwind Labs.