This skill addresses .astro-file styling specifically (scoping semantics unique to Astro components), not the UI framework setup itself (astro-integrations) or SOLID file-organization rules for style files (solid-astro).
Astro Styling
Agent Workflow (MANDATORY)
Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:
- 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 7
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Styling
.astro components 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:list for 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 .astro files 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:global in 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:global inside non-layout components
- Importing CSS in multiple components without CSS Modules
- Mixing Tailwind and custom class naming without a clear convention
1---2name: astro-styling3description: Use when styling Astro components — scoped CSS, CSS Modules, Tailwind CSS, UnoCSS, Sass, the class:list directive, or global styles.4---56<objective>7Covers styling options for `.astro` components: default component-scoped `<style>`, `<style is:global>` for base styles/resets (reserved for layouts), CSS Modules (`.module.css`) for framework components (React, Vue), Tailwind CSS, UnoCSS, and Sass/SCSS via Vite preprocessors. Includes the `class:list` directive for conditional class application and CSS custom properties for design tokens/themes.89This skill addresses `.astro`-file styling specifically (scoping semantics unique to Astro components), not the UI framework setup itself (astro-integrations) or SOLID file-organization rules for style files (solid-astro).10</objective>1112# Astro Styling1314## Agent Workflow (MANDATORY)1516Before ANY implementation, spawn 3 agents in parallel, one `Agent` call each with a `name`:17181. **fuse-ai-pilot:explore-codebase** - Analyze existing styles, integrations, and patterns192. **fuse-ai-pilot:research-expert** - Verify latest Astro/Tailwind/UnoCSS docs via Context7/Exa203. **mcp__context7__query-docs** - Check integration compatibility with Astro 72122After implementation, run **fuse-ai-pilot:sniper** for validation.2324---2526## Overview2728### When to Use2930- Styling `.astro` components with component-scoped CSS31- Setting up Tailwind CSS or UnoCSS in an Astro project32- Using CSS Modules for framework-agnostic scoping33- Applying global base styles (reset, fonts, variables)34- Using `class:list` for conditional class application35- Adding Sass/SCSS via Vite preprocessors3637### Styling Options3839| Method | Scope | When to Use |40|--------|-------|-------------|41| `<style>` in `.astro` | Component | Default — scoped to component |42| `<style is:global>` | Global | Base styles, resets |43| CSS Modules `.module.css` | Component | Framework components (React, Vue) |44| Tailwind CSS | Utility | Rapid UI development |45| UnoCSS | Utility | Lightweight, configurable atomic CSS |46| Sass/SCSS | Component/Global | Advanced features, variables, mixins |4748---4950## Reference Guide5152### Concepts5354| Topic | Reference | When to Consult |55|-------|-----------|-----------------|56| Scoped CSS | [scoped-css.md](references/scoped-css.md) | Component styling |57| CSS Modules | [css-modules.md](references/css-modules.md) | Framework components |58| Global styles | [global-styles.md](references/global-styles.md) | Resets, base styles |59| Tailwind | [tailwind.md](references/tailwind.md) | Utility-first CSS |60| UnoCSS | [unocss.md](references/unocss.md) | Atomic CSS engine |61| Sass/SCSS | [sass.md](references/sass.md) | Preprocessor features |62| CSS Variables | [css-variables.md](references/css-variables.md) | Design tokens, themes |6364### Templates6566| Template | When to Use |67|----------|-------------|68| [scoped-component.md](references/templates/scoped-component.md) | Component with scoped + conditional classes |69| [tailwind-setup.md](references/templates/tailwind-setup.md) | Full Tailwind CSS project setup |70| [unocss-setup.md](references/templates/unocss-setup.md) | Full UnoCSS project setup |7172---7374## Best Practices75761. **Prefer scoped styles** — Use `<style>` in `.astro` files by default772. **Global styles in layouts** — Apply resets and base styles in root layout783. **CSS variables for themes** — Define design tokens as custom properties794. **Avoid `is:global` in components** — Reserve for layouts and global files805. **class:list over ternaries** — More readable conditional class logic8182---8384## Forbidden8586- Writing inline styles for layout/theme — use CSS classes instead87- Using `is:global` inside non-layout components88- Importing CSS in multiple components without CSS Modules89- Mixing Tailwind and custom class naming without a clear convention
fusengine