Styling - Aero

Aero treats CSS as a first-class web standard. There is no proprietary scoping, no CSS-in-JS runtime, and no special file extensions. Write CSS the way you already know — Vite handles bundling, autoprefixing, and minification.

Linking stylesheets

Reference CSS files with the @styles/ alias in any template:

<link rel="stylesheet" href="@styles/global.css" />

This resolves to client/assets/styles/global.css. Vite processes the file through its CSS pipeline (PostCSS, autoprefixer, minification) and outputs a hashed asset.

`<style>` blocks

Add <style> tags directly in components, layouts, and pages. Top-level style bodies are compiled through Vite’s CSS pipeline, then injected into the document <head> at render time (dev, build, and preview):

client/components/card.html

<div class="card">
	<h2>{ title }</h2>
</div>

<style>
	.card {
		border: 1px solid #ddd;
		padding: 1rem;
		border-radius: 0.5rem;
	}
</style>

Only top-level <style> siblings of the template body are collected this way. Nested <style> tags inside markup stay as ordinary HTML.

Dynamic CSS custom properties

Use the props attribute on <style> to inject build-time values as CSS custom properties:

<script is:build>
	const { accent } = Aero.props
	const theme = { fg: '#111', bg: '#fff', accent }
</script>

<style props="{ ...theme }">
	.card {
		color: var(--fg);
		background: var(--bg);
		border-color: var(--accent);
	}
</style>

Each key in the spread becomes a --keyName custom property. Props are applied at render time on top of the Vite-processed CSS.

CSS frameworks

Because Aero uses Vite, CSS frameworks that integrate with PostCSS or Vite work out of the box. Install the framework, configure it in your Vite or PostCSS config, and import or link the styles:

<link rel="stylesheet" href="@styles/tailwind.css" />

Tailwind CSS v4 in `<style>` blocks

With @tailwindcss/vite, page and component <style> blocks go through the same pipeline as linked CSS. Use @reference so @apply / @utility can see your theme without duplicating global CSS:

<style>
	@import 'tailwindcss/utilities';
	@reference '@styles/global.css';

	@utility keyed-list {
		@apply list-inside font-mono text-sm space-y-2;
		list-style-type: decimal-leading-zero;
	}
</style>

Keep shared @theme tokens and site-wide @utility definitions in linked stylesheets (for example client/assets/styles/global.css). Use template <style> blocks for page- or component-local rules.

No scoped styles

Aero does not provide built-in style scoping (like scoped attributes or CSS Modules). This is intentional — Aero’s HTML-first philosophy keeps CSS standard and predictable. Use naming conventions (BEM, utility classes) or CSS nesting/layers to manage specificity.

Organization

A typical style setup:

client/assets/styles/
├── global.css          # Reset, typography, variables
├── components.css      # Shared component styles
└── utilities.css       # Helper classes

Link the global stylesheet in your base layout so it applies to every page:

client/layouts/base.html

<head>
	<link rel="stylesheet" href="@styles/global.css" />
</head>

​Linking stylesheets

​<style> blocks

​Dynamic CSS custom properties

​CSS frameworks

​Tailwind CSS v4 in <style> blocks

​No scoped styles

​Organization