CSS Update
When you add a new Tailwind class or custom CSS to a block, the style won't appear on your live store until Tailwind is recompiled for that page. The CSS Update tab in the Builder's Settings panel does exactly that: it recompiles Tailwind plus your custom CSS for the current page.
When you need CSS Update
Run CSS Update whenever you add a class or style that wasn't already used on the page, for example:
- Adding a Tailwind utility class such as
text-3xloruppercaseto an element. - Writing custom CSS inside a block's
<style>tag.
Tailwind only ships the classes it can see. A brand-new class needs a recompile before it takes effect on your site.
The workflow
Follow these steps in order.
Add your class in the block editor
Select the element you want to change and open the Edit Custom AI Block editor
(the </> icon in the element toolbar). Add your new class to the element, for
example add text-3xl to a button or uppercase to a heading, then click
Apply Changes. Your edit is now reflected in the Builder preview so you
can see how it looks.
Save (keep it in the Builder)
Click the Save button (top right) to keep your change in the Builder. Your edit is stored, but it is not on your live site yet.
Run CSS Update
Open Settings → CSS Update and click Update current page CSS. This recompiles Tailwind and your custom CSS for the current page so your new class is compiled correctly.
Publish (send it to your live site)
Click the Publish button (top right) to push your changes to your live website. Only after you publish will the change reflect on your live site.