Building a site
The canvas shows your CSS
How the visual editor shows blocks in the website's own stylesheet.
The visual editor renders your blocks in the website's own stylesheet, so they look on the canvas exactly as they do on the site. There's nothing to set up: Aurora finds resources/css/app.css through Vite (the built file, or the dev server while npm run dev runs) and scopes it to the canvas with CSS @scope, so it can't touch the admin around it. Whatever your stylesheet says of the page itself (:root, html, body) it says of the canvas.
Style the page in CSS, not with classes on <body>
The canvas has no <body> of the site's, so put the page's font, colours and background in the stylesheet:
@layer base {
body {
@apply bg-white font-body text-zinc-600;
}
}Fonts
Fonts in the stylesheet (@font-face, @import) come along. Fonts linked from your layout's <head> don't, so load them in the stylesheet too, or the canvas shows them in a fallback font.
@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700');
@import 'tailwindcss';Another entry
Set AURORA_WEBSITE_CSS (aurora.website_css) to another Vite entry, or leave it empty to show blocks without the site's styles.