Pular para o conteúdo
Sinapse Sinapse

Astro

Tutorial completo para usar Sinapse em Astro: projeto, Tailwind v4, CSS copiado, validação e primeiro componente.

Tutorial por stack

Astro usa o CSS Sinapse como base do layout

Este fluxo mostra o caminho direto para Astro: configurar Tailwind v4, importar os 3 CSS Sinapse, validar um botão e só então transformar o markup em componente.

  1. 01 Crie ou abra um projeto Astro
  2. 02 Instale Tailwind v4 no Vite do Astro
  3. 03 Copie os 3 CSS e importe depois do Tailwind
  4. 04 Valide o primeiro botão em uma página Astro
  5. 05 Transforme o botão validado em componente Astro
  6. 06 Use o componente na página

1 · Projeto

Crie ou abra um projeto Astro

Se o projeto já existe, entre nele. Em projeto novo, comece pelo starter oficial do Astro e siga com pnpm.

terminal

pnpm create astro@latest meu-app
cd meu-app
pnpm install

2 · Tailwind v4

Instale Tailwind v4 no Vite do Astro

O Sinapse depende de Tailwind v4. No Astro, registre o plugin oficial do Tailwind dentro de vite.plugins.

terminal

pnpm add tailwindcss @tailwindcss/vite

astro.config.mjs

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

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

3 · CSS Sinapse

Copie os 3 CSS e importe depois do Tailwind

Copie tokens.css, components.css e index.css em src/assets/styles/sinapse. Depois importe o Sinapse no CSS global do Astro.

estrutura sugerida

src/
├── assets/
│   └── styles/
│       └── sinapse/
│           ├── tokens.css
│           ├── components.css
│           └── index.css
├── components/
│   └── Button.astro
├── layouts/
│   └── BaseLayout.astro
└── styles/
    └── global.css

src/styles/global.css

@import "tailwindcss";
@import "../assets/styles/sinapse/index.css";

src/layouts/BaseLayout.astro

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

const { title = 'Sinapse' } = Astro.props
---

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

O conteúdo dos 3 arquivos vem de /comecar. Esta etapa continua sendo só CSS: não baixa fonte, ícone ou pacote Sinapse.

4 · Validação Sinapse

Valide o primeiro botão em uma página Astro

Antes de criar componentes, confirme que o CSS global está chegando à página. Se o botão aparecer com borda coral e texto azul, a configuração está correta.

src/pages/index.astro

---
import BaseLayout from '../layouts/BaseLayout.astro'
---

<BaseLayout title="Sinapse rodando">
  <button
    type="button"
    class="itps-btn itps-btn--primary"
  >
    Sinapse rodando
  </button>
</BaseLayout>

5 · Componente

Transforme o botão validado em componente Astro

Depois da validação, mova o markup para um componente simples. O Astro fica como uma camada fina sobre as classes e tokens do Sinapse.

src/components/Button.astro

---
interface Props {
  label?: string
}

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

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

6 · Uso

Use o componente na página

Se o componente renderizar com o mesmo visual do botão validado, o fluxo Astro está pronto para receber outros padrões do catálogo.

src/pages/index.astro

---
import BaseLayout from '../layouts/BaseLayout.astro'
import Button from '../components/Button.astro'
---

<BaseLayout title="Sinapse rodando">
  <Button />
</BaseLayout>

Próximos passos

Continue com a referência certa

Comece por aqui

Volte ao tutorial dos 3 arquivos e do primeiro botão.

Docs Tailwind + Vite

Instalação oficial do Tailwind v4 com Vite.

Button Sinapse

Referência visual do primeiro componente validado.