fusengine Astro Styling
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Analyze existing styles, integrations, and patterns
- fuse-ai-pilot:research-expert - Verify latest Astro/Tailwind/UnoCSS docs via Context7/Exa
- mcp__context7__query-docs - Check integration compatibility with Astro 6
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Styling
.astrocomponents with component-scoped CSS - Setting up Tailwind CSS or UnoCSS in an Astro project
- Using CSS Modules for framework-agnostic scoping
- Applying global base styles (reset, fonts, variables)
- Using
class:listfor conditional class application - Adding Sass/SCSS via Vite preprocessors
Styling Options
| Method | Scope | When to Use |
|---|---|---|
<style> in .astro |
Component | Default — scoped to component |
<style is:global> |
Global | Base styles, resets |
CSS Modules .module.css |
Component | Framework components (React, Vue) |
| Tailwind CSS | Utility | Rapid UI development |
| UnoCSS | Utility | Lightweight, configurable atomic CSS |
| Sass/SCSS | Component/Global | Advanced features, variables, mixins |
Reference Guide
Concepts
| Topic | Reference | When to Consult |
|---|---|---|
| Scoped CSS | scoped-css.md | Component styling |
| CSS Modules | css-modules.md | Framework components |
| Global styles | global-styles.md | Resets, base styles |
| Tailwind | tailwind.md | Utility-first CSS |
| UnoCSS | unocss.md | Atomic CSS engine |
| Sass/SCSS | sass.md | Preprocessor features |
| CSS Variables | css-variables.md | Design tokens, themes |
Templates
| Template | When to Use |
|---|---|
| scoped-component.md | Component with scoped + conditional classes |
| tailwind-setup.md | Full Tailwind CSS project setup |
| unocss-setup.md | Full UnoCSS project setup |
Best Practices
- Prefer scoped styles — Use
<style>in.astrofiles by default - Global styles in layouts — Apply resets and base styles in root layout
- CSS variables for themes — Define design tokens as custom properties
- Avoid
is:globalin components — Reserve for layouts and global files - class:list over ternaries — More readable conditional class logic
Forbidden
- Writing inline styles for layout/theme — use CSS classes instead
- Using
is:globalinside non-layout components - Importing CSS in multiple components without CSS Modules
- Mixing Tailwind and custom class naming without a clear convention