> ## Documentation Index
> Fetch the complete documentation index at: https://aerojs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

> Use standard CSS in Aero — linked stylesheets, inline styles, and CSS frameworks all work as expected.

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:

```html theme={"theme":"github-dark-default"}
<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):

```html client/components/card.html theme={"theme":"github-dark-default"}
<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:

```html theme={"theme":"github-dark-default"}
<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:

```html theme={"theme":"github-dark-default"}
<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:

```html theme={"theme":"github-dark-default"}
<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:

```html client/layouts/base.html theme={"theme":"github-dark-default"}
<head>
	<link rel="stylesheet" href="@styles/global.css" />
</head>
```
