Pular para o conteúdo

HTML

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

Tutorial por stack

HTML usa o CSS Sinapse diretamente na marcação

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. 01 Use o CSS pré-compilado
  2. 02 Crie um projeto Vite com Tailwind v4
  3. 03 Baixe o CSS versionado e importe depois do Tailwind
  4. 04 Confira o tema no navegador

1 · Sem build

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

<!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 · Com build

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

pnpm create vite@latest meu-app --template vanilla-ts
cd meu-app
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

Baixe o CSS versionado e importe depois do Tailwind

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

terminal

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

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

index.html

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

4 · Validação

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

pnpm dev

Próximos passos

Continue com a referência certa

Comece por aqui

Registry para shadcn e CSS para Astro/HTML.

Tailwind com Vite

Instalação oficial do Tailwind v4 com Vite.

Componentes

Cada página traz o HTML pronto para copiar do componente.