# Astro

Tutorial para usar o Sinapse DS em Astro: Tailwind v4, CSS versionado baixado do site e classes itps-* em componentes Astro.

Astro não usa o registry do shadcn: o CSS Sinapse entra como arquivos versionados baixados do site, e os componentes Astro aplicam as classes itps-*.

## 1. Crie ou abra um projeto Astro com Tailwind v4

Em projeto novo, use o starter oficial. Registre o plugin do Tailwind v4 em vite.plugins no astro.config.mjs.

`terminal`

```bash
pnpm create astro@latest meu-app
cd meu-app
pnpm add tailwindcss @tailwindcss/vite
```

`astro.config.mjs`

```mjs
import { defineConfig } from 'astro/config'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})
```

## 2. Baixe o CSS versionado e importe depois do Tailwind

O comando baixa tokens, componentes, ícones e a fonte Tabler para src/styles/sinapse. Importe o Sinapse no CSS global, sempre depois do Tailwind, e carregue o CSS global no layout.

`terminal`

```bash
mkdir -p src/styles/sinapse/fonts && for f in index.css tokens.css components.css icons.css fonts/tabler-icons.woff2; do curl -fsSL -o "src/styles/sinapse/$f" "https://dsystem.sinapse.org.br/css/0.9.0/$f"; done
```

`src/styles/global.css`

```css
@import "tailwindcss";
@import "./sinapse/index.css";
```

`src/layouts/BaseLayout.astro`

```astro
---
import '../styles/global.css'
---

<html lang="pt-BR">
  <body>
    <slot />
  </body>
</html>
```

A versão 0.9.0 fica fixa no comando. Para atualizar, troque a versão e rode de novo; /css/latest/ acompanha sempre a versão atual, mas, em produção, prefira a versão fixa.

## 3. Crie componentes Astro com as classes itps-*

Componentes Astro ficam como camada fina sobre as classes do Design System. Cada página de componente traz o HTML pronto para copiar correspondente.

`src/components/Button.astro`

```astro
---
interface Props {
  label?: string
}

const { label = 'Sinapse rodando' } = Astro.props
---

<button type="button" class="itps-btn itps-btn--primary">{label}</button>
```

## 4. Confira o tema no navegador

Rode o servidor de desenvolvimento e abra uma página que use o componente. O botão padrão aparece contornado em coral com texto em azul institucional; com a classe .dark no <html>, os tokens mudam para o modo escuro.

`terminal`

```bash
pnpm dev
```

## Próximos passos

- [Comece por aqui](/comecar): Registry para shadcn e CSS para Astro/HTML.
- [Tailwind no Astro](https://tailwindcss.com/docs/installation/framework-guides/astro): Instalação oficial do Tailwind v4 com Astro.
- [Componentes](/componentes): Cada página traz o HTML pronto para copiar do componente.