Pular para o conteúdo
Sinapse Sinapse

HTML

Tutorial completo para usar Sinapse em HTML: Vite, Tailwind v4, CSS copiado e classes itps.

Tutorial por stack

HTML usa o contrato base de classes itps

Este fluxo valida o Design System sem depender de uma biblioteca de componentes. O HTML recebe Tailwind, importa o CSS Sinapse e usa as classes itps diretamente.

  1. 01 Crie ou abra um projeto HTML com Vite
  2. 02 Instale Tailwind v4 e configure o Vite plugin
  3. 03 Copie os 3 CSS e importe depois do Tailwind
  4. 04 Valide o primeiro botão no HTML
  5. 05 Monte a primeira superfície com tokens e classes itps

1 · Projeto

Crie ou abra um projeto HTML com Vite

Para HTML com build moderno, use Vite vanilla. Se o projeto já existe, entre nele e siga para Tailwind.

terminal

pnpm create vite@latest meu-app --template vanilla-ts
cd meu-app
pnpm install

2 · Tailwind v4

Instale Tailwind v4 e configure o Vite plugin

Sinapse depende de Tailwind v4 no projeto. Primeiro deixe Tailwind compilando normalmente.

terminal

pnpm add tailwindcss @tailwindcss/vite

vite.config.ts

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

export default defineConfig({
  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. Este guia usa apenas HTML, Tailwind e o CSS Sinapse.

estrutura sugerida

src/
├── assets/
│   └── styles/
│       └── sinapse/
│           ├── tokens.css
│           ├── components.css
│           └── index.css
├── main.ts
└── style.css

src/style.css

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

O conteúdo dos 3 arquivos vem de /comecar. Esta etapa continua sendo só CSS.

4 · Validação Sinapse

Valide o primeiro botão no HTML

Cole o botão em index.html. Se aparecer com borda coral e texto azul, o build já está entregando Tailwind e Sinapse.

index.html

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

5 · Primeiro componente

Monte a primeira superfície com tokens e classes itps

Use utilities semânticas para layout local e classes itps para padrões repetidos, como botões.

index.html

<main class="min-h-screen bg-background p-8 text-foreground">
  <section class="max-w-md rounded-card border border-border bg-card p-6 text-card-foreground shadow-sm">
    <h1 class="text-xl font-semibold">Sinapse rodando</h1>
    <p class="mt-2 text-sm text-muted-foreground">
      O visual vem do CSS Sinapse e as classes itps continuam portáveis.
    </p>
    <button type="button" class="itps-btn itps-btn--primary mt-4">
      Continuar
    </button>
  </section>
</main>

Próximos passos

Continue com a referência certa

Comece por aqui

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

Button Sinapse

Referência visual do primeiro componente validado.

Componentes

Veja classes e snippets portáveis para outros padrões.