CSS compile

compileCSS builds the stylesheet a page needs from the classes its markup uses: Tailwind utilities, the DaisyUI components those classes call for, and your theme tokens. PageHub runs it for every published page, preview and the editor canvas.

TypeScript

import { compileCSS } from "@pagehub/sdk/compile-css";

const css = await compileCSS({
  classes: ["btn", "btn-primary", "py-space-md", "text-base-content"],
  themeCSS: ":root { --primary: oklch(55% 0.2 260); }",
  lean: true,
});

Server only: it uses @tailwindcss/node and reads files from disk. tailwindcss and daisyui are peer dependencies.

Options

Option	What it does
`classes`	The class names your markup uses. Collect them from the rendered HTML.
`themeCSS`	Your `:root` token block. Its values win over the SDK's default theme.
`lean`	Drops `@keyframes` no rule uses. Use it for public pages and exports.
`keepKeyframesMentionedIn`	With `lean`: keeps any keyframes whose name appears in this text (for example, the page source, so a `style="animation: …"` still works).
`breakpoints`	Your own breakpoint widths in px, for example `{ md: 900 }`. The `@media` thresholds in the output are rewritten to match.
`daisyui`	`false` ships no DaisyUI component CSS, so a site's own `.hero` or `.card` isn't restyled. Default `true`.
`editor`	Rewrites `@media` to container queries, so an editor canvas responds to its own width. Never set it for a public page.

What the output looks like

Only the DaisyUI component files for classes you used (btn loads the button styles), with the rules for unused classes pruned.
@layer blocks unwrapped and the result minified.
A fresh compiler per call. Don't cache one across pages: Tailwind remembers every class it has seen, so a shared compiler leaks one page's utilities into the next.

Source: packages/sdk/src/compile-css/compile.ts.