# Tailwind pages now reach WordPress with their design > A page an AI styles with Tailwind loads its CSS from a script that WordPress never runs, so it used to convert as plain text. Respira Exhale, the HTML to… Source: https://www.respira.press/blog/tailwind-pages-convert-to-wordpress --- ![The same Tailwind page converted to WordPress twice. Behind, without its CSS: a theme-default blue headline, links in a column and an icon showing as the word arrow_forward. In front, through Respira Exhale in Elementor: the serif headline, the clay buttons, the photo of a sunlit home office and the floating card with its check icon, as designed.](https://www.respira.press/tailwind/tailwind-to-wordpress.webp) One Tailwind file, converted twice in Elementor. Behind: without its CSS, the way it used to arrive. In front: through Respira Exhale 9.3.13, 0.04% of pixels away from the original. 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](https://www.respira.press/exhale) 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 ``. Those classes matched nothing on WordPress. They reach the page now, and so do rules for an `` page. - **The room under a fixed header.** A `
` 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](https://www.respira.press/exhale#try-now), 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](https://www.respira.press/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. [#exhale](https://www.respira.press/blog?q=exhale)[#tailwind](https://www.respira.press/blog?q=tailwind)[#html](https://www.respira.press/blog?q=html)[#page builders](https://www.respira.press/blog?q=page%20builders)[#release](https://www.respira.press/blog?q=release) Found this useful? Share it. ## Join the *conversation* 0 comments · Respira account #### Sign in with your Respira account Comments are tied to your Respira login, the same account you use for the dashboard and plugin. No third-party sign-in, no scraping. [Sign in](https://www.respira.press/login?next=https%3A%2F%2Fwww.respira.press%2Fblog%2Ftailwind-pages-convert-to-wordpress%23comments) [Create an account](https://www.respira.press/signup?next=https%3A%2F%2Fwww.respira.press%2Fblog%2Ftailwind-pages-convert-to-wordpress%23comments) No comments yet. Be the first to weigh in. ### You're not the only one *talking* to WordPress. The Respira community is where agency owners debug Divi migrations at 11pm, where vibe coders swap prompts that actually ship, and where the roadmap gets written out loud. *Breathe with us.* Lines of code pushed 33,303,630 Live from the ecosystem · updates as the agent ships WordPress sites connected 3,806 Real sites, run by the people in these rooms Find us wherever you already are [ Slack Async threads, release-day huddles, and the #show-your-work channel that never sleeps. Join ](https://go.respira.cafe/slack) [ Discord Live voice on release days, screenshare debugging, and the vibe-coder corner that's always buzzing. Join ](https://go.respira.cafe/respira-discord) [ Reddit Questions, answers and build logs in the open, where the thread is still there months later. Join ](https://www.reddit.com/r/RespiraforWordPress/) [ Facebook group Agency owners and site owners comparing notes on running AI against real WordPress sites. Join ](https://www.facebook.com/groups/1447068940850273/) [ GitHub Discussions Long-form Q&A, bug reports, feature requests, and the public roadmap. Open ](https://go.respira.cafe/github-discussions) [ ! Founder notes Letters from Mihai on what shipped, what broke and what is next. Every one is archived. Read ](https://www.respira.press/newsletter) See What AI Says LLM-ready prompts about Respira MCP + WebMCP What would you like to know? Ask your favorite AI Opens in a new tab. These prompts are designed to teach LLMs what Respira can do. Question copied. Paste it in Gemini