astro-stylinglisted

# Astro Styling ## Agent Workflow (MANDATORY) Before ANY implementation, use `TeamCreate` to spawn 3 agents: 1. **fuse-ai-pilot:explore-codebase** - Analyze existing styles, integrations, and patterns 2. **fuse-ai-pilot:research-expert** - Verify latest Astro/Tailwind/UnoCSS docs via Context7/Exa 3. **mcp__context7__query-docs** - Check integration compatibility with Astro 6 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](references/scoped-css.md) | Component styling | | CSS Modules | [css-module