# HTML

Tutorial para usar o Sinapse DS em HTML: CSS pré-compilado sem build ou CSS versionado com Vite e Tailwind v4.

Sem build, um link para o CSS pré-compilado basta. Com Vite e Tailwind v4, baixe o CSS versionado e ganhe também os utilitários do Tailwind.

## 1. Use o CSS pré-compilado

O sinapse.min.css traz tokens, classes itps-*, modo escuro (classe .dark) e ícones Tabler. Utilitários do Tailwind (flex, gap, grid) não vêm nele: para layout, use CSS próprio ou o caminho com build.

`index.html`

```html
<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://dsystem.sinapse.org.br/css/0.9.0/sinapse.min.css">
  </head>
  <body>
    <button type="button" class="itps-btn itps-btn--primary">
      Sinapse rodando
    </button>
  </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.

## 2. Crie um projeto Vite com Tailwind v4

Com Vite vanilla e Tailwind v4, o markup usa as classes itps-* e também os utilitários do Tailwind.

`terminal`

```bash
pnpm create vite@latest meu-app --template vanilla-ts
cd meu-app
pnpm add tailwindcss @tailwindcss/vite
```

`vite.config.ts`

```ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

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

O comando baixa tokens, componentes, ícones e a fonte Tabler para src/styles/sinapse.

`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/style.css`

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

`index.html`

```html
<button type="button" class="itps-btn itps-btn--primary">
  Sinapse rodando
</button>
```

## 4. Confira o tema no navegador

Rode o servidor de desenvolvimento e abra o index.html. 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 com Vite](https://tailwindcss.com/docs/installation/using-vite): Instalação oficial do Tailwind v4 com Vite.
- [Componentes](/componentes): Cada página traz o HTML pronto para copiar do componente.