Pular para o conteúdo
Sinapse Sinapse

Comece por aqui

Copie os arquivos CSS, importe no CSS principal do seu projeto e valide o primeiro botão Sinapse.

Tutorial · ~5 min

O caminho mais curto para o Sinapse rodar

Esta página prioriza a cópia manual porque é o caminho mais rápido para testar o Design System em um produto real. Versionamento e distribuição por pacote entram depois, quando o projeto precisar controlar atualização e distribuição.

  1. 01 Pré-requisito: Tailwind v4
  2. 02 Copiar CSS Sinapse
  3. 03 Importar no CSS principal
  4. 04 Validar — primeiro botão
  5. 05 Escolher a stack do projeto

1 · Pré-requisito

Tailwind v4 configurado

O Sinapse depende de Tailwind v4 — os mapeamentos @theme inline e os utilitários @utility são recursos da v4. Se o seu projeto ainda não usa Tailwind v4, siga o guia oficial do Tailwind para a sua stack antes de continuar.

2 · Copiar os arquivos .css

Copie e cole os 3 arquivos CSS no seu projeto

Sem pacote, sem registry, sem arquivo extra. Crie a pasta src/assets/styles/sinapse/ (ou equivalente) no seu projeto e copie o conteúdo dos 3 blocos abaixo em arquivos com os mesmos nomes.

Estrutura final no seu projeto

estrutura sugerida

src/
└── assets/
    └── styles/
        └── sinapse/
            ├── tokens.css       ← cole o conteúdo da aba tokens.css
            ├── components.css   ← cole o conteúdo da aba components.css
            └── index.css        ← cole o conteúdo da aba index.css

Copie os 3 CSS. Esta etapa não baixa fonte, ícone, npm ou arquivo binário — só o contrato visual necessário para validar o primeiro botão.

Arquivo 1 de 3 tokens.css 517 linhas

Paleta OKLCH (coral, azul, neutros e feedback), tokens semânticos (--brand, --primary, --background, etc.), modo escuro e utilitários Tailwind (text-brand, bg-primary, text-foreground).

tokens.css

/* ==========================================================================
   0. DARK VARIANT — Tailwind v4
   --------------------------------------------------------------------------
   Registra `.dark` como seletor pro variant `dark:` do Tailwind v4
   (default seria prefers-color-scheme). Necessário pra permitir toggle
   manual via classe .dark no <html>.
   ========================================================================== */
@custom-variant dark (&:where(.dark, .dark *));

/* ==========================================================================
   1. PRIMITIVE TOKENS
   --------------------------------------------------------------------------
   Paleta crua. Espelha a tabela "1. Color" do Figma do DS ITpS.
   Primitives agora sao state-aware: `:root` resolve light mode e `.dark`
   resolve dark mode para o mesmo nome publico de token.

   NÃO usar diretamente em componentes — sempre via semantic tokens.
   ========================================================================== */

:root {
  /* --- Base scale (azul neutro) --- */
  --itps-base-0:    #FFFFFF;
  --itps-base-50:   #F9FAFB;
  --itps-base-100:  #EDF0F2;
  --itps-base-200:  #C4CCD4;
  --itps-base-300:  #A6B2BE;
  --itps-base-400:  #8999A9;
  --itps-base-500:  #6C7F93;
  --itps-base-600:  #5F7081;  /* accessible-min */
  --itps-base-700:  #394C60;
  --itps-base-800:  #243242;
  --itps-base-900:  #0C1E31;
  --itps-base-950:  #030F1C;

  /* --- Primary / feedback danger (coral) --- */
  --itps-primary-50:   #FDF7F7;
  --itps-primary-100:  #FBEFEE;
  --itps-primary-200:  #FBDCDB;
  --itps-primary-300:  #F8C6C4;
  --itps-primary-400:  #F7BEBB;
  --itps-primary-500:  #F5B0AD;
  --itps-primary-600:  #F39F9B;
  --itps-primary-700:  #F0857F;
  --itps-primary-800:  #EE736D;
  --itps-primary-900:  #EB5E57;  /* default */
  --itps-primary-950:  #D3242D;

  /* --- Secondary (azul institucional) --- */
  --itps-secondary-25:   #FBFCFD;
  --itps-secondary-50:   #F8FAFC;
  --itps-secondary-100:  #E6EDF4;
  --itps-secondary-200:  #D8E3EE;
  --itps-secondary-300:  #BAD0E6;
  --itps-secondary-400:  #88B1DD;
  --itps-secondary-500:  #6C9FD5;
  --itps-secondary-600:  #4D8ACC;
  --itps-secondary-700:  #397DC6;
  --itps-secondary-800:  #326EAF;
  --itps-secondary-900:  #1961AC;  /* default */
  --itps-secondary-950:  #14508F;

  /* --- Terciary (neutro esverdeado) ---
     Escala parcial: 50, 100, 300, 500. Steps faltantes serão adicionados sob demanda. */
  --itps-terciary-50:   #F6F8F8;
  --itps-terciary-100:  #DFE7E7;
  --itps-terciary-300:  #D3DFDD;
  --itps-terciary-500:  #C4CECA;

  /* --- Feedback / alert (amarelo) ---
     Namespace da designer: feedback/alert/<step>. Steps especiais formalizados:
     - 950 (min-graphics): mínimo p/ ícone/linha sobre branco passar WCAG
     - 1000 (min-text):    mínimo p/ TEXTO sobre branco passar WCAG */
  --itps-alert-100:   #FEFAF1;
  --itps-alert-200:   #FBF1D5;
  --itps-alert-600:   #F7E0A1;
  --itps-alert-800:   #F4D37C;
  --itps-alert-900:   #F0C653;
  --itps-alert-950:   #B78E1D;  /* min-graphics */
  --itps-alert-1000:  #986F00;  /* min-text */

  /* --- Feedback: success (verde) --- */
  --itps-success-100:  #F4FBF8;
  --itps-success-200:  #D1F0E3;
  --itps-success-600:  #79D2AF;
  --itps-success-800:  #09AA69;
  --itps-success-900:  #00804D;
  --itps-success-950:  #00804D;

  /* Destructive: coral (--itps-primary-*) é single source of truth para danger/feedback. */
}

.dark {
  /* --- Base scale (azul neutro) --- */
  --itps-base-0:    #030F1C;
  --itps-base-50:   #0C1E31;
  --itps-base-100:  #243242;
  --itps-base-200:  #394C60;
  --itps-base-300:  #5F7081;
  --itps-base-400:  #6C7F93;
  --itps-base-500:  #8999A9;
  --itps-base-600:  #A6B2BE;
  --itps-base-700:  #C4CCD4;
  --itps-base-800:  #EDF0F2;
  --itps-base-900:  #F9FAFB;
  --itps-base-950:  #FFFFFF;

  /* --- Primary / feedback danger (coral) --- */
  --itps-primary-50:   #2D131F;
  --itps-primary-100:  #311F28;
  --itps-primary-200:  #32232C;
  --itps-primary-300:  #4A323A;
  --itps-primary-400:  #63494F;
  --itps-primary-500:  #7C6064;
  --itps-primary-600:  #95787B;
  --itps-primary-700:  #AE8F92;
  --itps-primary-800:  #C9B3B5;
  --itps-primary-900:  #FF4C43;
  --itps-primary-950:  #D3242D;

  /* --- Secondary (azul institucional) --- */
  --itps-secondary-25:   #021427;
  --itps-secondary-50:   #051F3B;
  --itps-secondary-100:  #0A2643;
  --itps-secondary-200:  #0E3762;
  --itps-secondary-300:  #1D4672;
  --itps-secondary-400:  #2D5886;
  --itps-secondary-500:  #406996;
  --itps-secondary-600:  #678AAD;
  --itps-secondary-700:  #8DA3BA;
  --itps-secondary-800:  #B1C1D1;
  --itps-secondary-900:  #4797EB;
  --itps-secondary-950:  #1961AC;

  /* --- Terciary (neutro esverdeado) --- */
  --itps-terciary-50:   #16222D;
  --itps-terciary-100:  #18242F;
  --itps-terciary-300:  #31393F;
  --itps-terciary-500:  #55595E;

  /* --- Feedback / alert (amarelo) --- */
  --itps-alert-100:   #302C14;
  --itps-alert-200:   #39351C;
  --itps-alert-600:   #917D3D;
  --itps-alert-800:   #C3AC69;
  --itps-alert-900:   #F0C653;
  --itps-alert-950:   #F0C653;
  --itps-alert-1000:  #F0C653;

  /* --- Feedback: success (verde) --- */
  --itps-success-100:  #022626;
  --itps-success-200:  #023C2F;
  --itps-success-600:  #076C4A;
  --itps-success-800:  #61AB92;
  --itps-success-900:  #089B61;
  --itps-success-950:  #09AA69;
}

/* ==========================================================================
   2. SEMANTIC TOKENS — shadcn-vue
   --------------------------------------------------------------------------
   Tokens que os componentes shadcn esperam.
   Cada um aponta pra um primitive da camada 1.
   Trocando o valor aqui, o look-and-feel do app inteiro muda.
   ========================================================================== */

:root {
  /* === ARQUITETURA ===
     Camada 1: Primitives (--itps-*) — paleta crua do Figma, state-aware.
     Camada 2: Semantic shadcn (--background, --foreground, --primary, --destructive, etc) — CANONICAL.
     Componentes consomem APENAS camada 2 via utility (bg-background, text-foreground, etc).

     DARK MODE: primitives trocam valor dentro de .dark; semânticos só recebem
     overrides quando o par acessível precisa de outro step. */

  /* --- Surfaces & containers (canonical shadcn) --- */
  --background:           var(--itps-base-0);          /* base/background/default-1 */
  --foreground:           var(--itps-base-950);        /* base/text/default */

  --card:                 var(--itps-base-50);         /* base/background/default-2 */
  --card-foreground:      var(--itps-base-950);

  --popover:              var(--itps-base-0);
  --popover-foreground:   var(--itps-base-950);

  --muted:                var(--itps-base-100);        /* base/background/surface */
  --muted-foreground:     var(--itps-base-800);        /* base/text/subtle */

  /* --- Brand and action semantics --- */

  /* Brand (coral institucional)
     Use para identidade visual Sinapse/ITpS: acentos, links editoriais,
     títulos de cards e detalhes de marca. */
  --brand:                var(--itps-primary-900);
  --brand-foreground:     var(--itps-base-0);

  /* Primary (azul institucional)
     shadcn usa primary para a acao principal. Coral fica reservado para
     brand/destructive/danger para nao confundir CTA compatível com marca visual. */
  --primary:              var(--itps-secondary-900);
  --primary-foreground:   var(--itps-base-0);

  /* Secondary (azul institucional — tinted surface) */
  --secondary:            var(--itps-secondary-50);
  --secondary-foreground: var(--itps-secondary-900);

  /* Accent (terciary tinted surface) */
  --accent:               var(--itps-terciary-100);
  --accent-foreground:    var(--itps-base-950);

  /* Destructive (= feedback/danger = coral) */
  --destructive:          var(--itps-primary-900);
  --destructive-foreground: var(--itps-base-950);

  /* --- Borders & inputs --- */
  --border:               var(--itps-base-100);
  --input:                var(--itps-base-200);
  --ring:                 var(--itps-secondary-900);

  /* --- Feedback semantic (extensão shadcn — não-padrão mas comum) --- */

  /* Danger alias (= destructive) */
  --danger:               var(--itps-primary-900);
  --danger-foreground:    var(--itps-base-950);

  /* Success (estado de sucesso) */
  --success:              var(--itps-success-900);
  --success-foreground:   var(--itps-base-0);

  /* Warning (atenção, não-crítico)
     fg=base-950 sobre alert-900 (#F0C653) = 12.42:1 AAA.
     alert-1000 é mustard escuro pra texto sobre branco — falha sobre alert-900. */
  --warning:              var(--itps-alert-900);
  --warning-foreground:   var(--itps-base-950);

  /* Info (mensagens informativas) */
  --info:                 var(--itps-secondary-900);
  --info-foreground:      var(--itps-base-0);

  /* --- shadcn sidebar semantic aliases ---
     Usados pelo componente Sidebar do shadcn/ui e ports compatíveis. */
  --sidebar:              var(--background);
  --sidebar-foreground:   var(--foreground);
  --sidebar-primary:      var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent:       var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border:       var(--border);
  --sidebar-ring:         var(--ring);

  /* --- Radius ---
     Escala Tailwind v4 default + 3 tokens semânticos por uso.
     - card (12px) = containers, cards, panels
     - form (999px) = buttons em formato pill
     - circle (999px) = avatares, badges circulares, dots */
  --radius:               0.5rem;                      /* shadcn alias — 8px */
  --rounded-card:         0.75rem;                     /* 12px */
  --rounded-form:         9999px;                      /* pill */
  --rounded-circle:       9999px;                      /* circle / pill */


  /* --- Charts (5 slots pra séries categóricas — vírus, regiões, períodos) ---
     Paleta inicial mapeada pra primitives. Refinar quando dashboards forem implementados. */
  --chart-1:              var(--itps-secondary-900);   /* azul */
  --chart-2:              var(--itps-success-800);     /* verde */
  --chart-3:              var(--itps-alert-900);       /* amarelo */
  --chart-4:              var(--itps-primary-900);     /* coral */
  --chart-5:              var(--itps-secondary-500);   /* azul claro */


  /* --- Effects (shadows + blur) ---
     Sombras tintadas azul institucional (secondary/opacity/950-10%).
     Hierarquia: medium=cards, large=overlays, extra-large=pop-ups.
     2-layer composition (sharp close + soft distant). */
  --shadow-medium:
    0 1px 2px 0 rgb(20 80 143 / 0.10),
    0 4px 6px -1px rgb(20 80 143 / 0.10);
  --shadow-large:
    0 4px 6px -4px rgb(20 80 143 / 0.10),
    0 10px 15px -3px rgb(20 80 143 / 0.10);
  --shadow-extra-large:
    0 8px 10px -6px rgb(20 80 143 / 0.10),
    0 20px 25px -5px rgb(20 80 143 / 0.10);

  --blur-small: 4px;

  /* --- 2k. Typography (font-family) ---
     Open Sans remains the preferred DS family when self-hosted or installed
     locally. The docs runtime does not fetch remote font CSS; it falls back to
     the system stack when Open Sans is unavailable. Aliases font-heading/font-body
     deixam porta aberta pra dual-font futuro sem refactor de componentes.

     DECISÃO: Tailwind defaults canonical para text-*, tracking-*, etc.
     Escala documentada em /estilos/tipografia mas NÃO sobrescreve Tailwind
     globalmente — preserva a11y (rem) e evita
     redimensionamento automático mobile que quebraria componentes não previstos. */

  --font-sans:    'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace;
}

/* ==========================================================================
   2z. DARK MODE
   --------------------------------------------------------------------------
   Estratégia: primitives ja foram redefinidos para o modo dark acima.
   Aqui ficam apenas overrides semânticos onde o mesmo step nao preserva
   contraste ou onde o Figma aponta outro step para o alias.
   ========================================================================== */

.dark {
  color-scheme: dark;

  --primary-foreground:   var(--itps-base-0);
  --secondary:            var(--itps-secondary-25);
  --destructive-foreground: var(--itps-base-0);
  --danger-foreground:    var(--itps-base-0);
  --warning-foreground:   var(--itps-base-0);

  /* Figma secondary/opacity/950-10% em dark = #1961AC1A. */
  --shadow-medium:
    0 1px 2px 0 rgb(25 97 172 / 0.10),
    0 4px 6px -1px rgb(25 97 172 / 0.10);
  --shadow-large:
    0 4px 6px -4px rgb(25 97 172 / 0.10),
    0 10px 15px -3px rgb(25 97 172 / 0.10);
  --shadow-extra-large:
    0 8px 10px -6px rgb(25 97 172 / 0.10),
    0 20px 25px -5px rgb(25 97 172 / 0.10);
}

/* ==========================================================================
   3. THEME MAPPING — Tailwind v4 @theme inline
   --------------------------------------------------------------------------
   Expõe os semantic tokens como utilitários: bg-primary, text-foreground, etc.
   `inline` é importante: sem ele, perde o suporte a opacity modifiers
   (ex: bg-primary/50).
   ========================================================================== */

@theme inline {
  /* Surfaces */
  --color-background:           var(--background);
  --color-foreground:           var(--foreground);
  --color-card:                 var(--card);
  --color-card-foreground:      var(--card-foreground);
  --color-popover:              var(--popover);
  --color-popover-foreground:   var(--popover-foreground);

  /* Brand and shadcn-compatible action colors */
  --color-brand:                var(--brand);
  --color-brand-foreground:     var(--brand-foreground);
  --color-primary:              var(--primary);
  --color-primary-foreground:   var(--primary-foreground);
  --color-secondary:            var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);

  /* Neutral helpers */
  --color-muted:                var(--muted);
  --color-muted-foreground:     var(--muted-foreground);
  --color-accent:               var(--accent);
  --color-accent-foreground:    var(--accent-foreground);

  /* Semantic states */
  --color-destructive:          var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-danger:               var(--danger);
  --color-danger-foreground:    var(--danger-foreground);
  --color-success:              var(--success);
  --color-success-foreground:   var(--success-foreground);
  --color-warning:              var(--warning);
  --color-warning-foreground:   var(--warning-foreground);
  --color-info:                 var(--info);
  --color-info-foreground:      var(--info-foreground);

  /* shadcn Sidebar */
  --color-sidebar:              var(--sidebar);
  --color-sidebar-foreground:   var(--sidebar-foreground);
  --color-sidebar-primary:      var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent:       var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border:       var(--sidebar-border);
  --color-sidebar-ring:         var(--sidebar-ring);

  /* Borders / inputs */
  --color-border:               var(--border);
  --color-input:                var(--input);
  --color-ring:                 var(--ring);

  /* State-aware semantic tokens são expostos via @utility blocks abaixo
     (property-scoped — bg-disabled e border-disabled podem ter valores distintos). */

  /* Charts */
  --color-chart-1:              var(--chart-1);
  --color-chart-2:              var(--chart-2);
  --color-chart-3:              var(--chart-3);
  --color-chart-4:              var(--chart-4);
  --color-chart-5:              var(--chart-5);

  /* Radius - shadcn-vue espera essas variantes calculadas a partir de --radius */
  --radius-sm:  calc(var(--radius) - 4px);
  --radius-md:  calc(var(--radius) - 2px);
  --radius-lg:  var(--radius);
  --radius-xl:  calc(var(--radius) + 4px);

  /* --- Brand scales (escalas completas como utilitários) ---
     Permite bg-primary-50, text-secondary-300, hover:bg-primary-100 etc.
     Dark mode futuro: redefinir os primitives `--itps-*` em .dark — utilitários
     se adaptam automaticamente sem tocar em nenhuma classe. */
  --color-base-0:        var(--itps-base-0);
  --color-base-50:       var(--itps-base-50);
  --color-base-100:      var(--itps-base-100);
  --color-base-200:      var(--itps-base-200);
  --color-base-300:      var(--itps-base-300);
  --color-base-400:      var(--itps-base-400);
  --color-base-500:      var(--itps-base-500);
  --color-base-600:      var(--itps-base-600);
  --color-base-700:      var(--itps-base-700);
  --color-base-800:      var(--itps-base-800);
  --color-base-900:      var(--itps-base-900);
  --color-base-950:      var(--itps-base-950);

  --color-primary-50:    var(--itps-primary-50);
  --color-primary-100:   var(--itps-primary-100);
  --color-primary-200:   var(--itps-primary-200);
  --color-primary-300:   var(--itps-primary-300);
  --color-primary-400:   var(--itps-primary-400);
  --color-primary-500:   var(--itps-primary-500);
  --color-primary-600:   var(--itps-primary-600);
  --color-primary-700:   var(--itps-primary-700);
  --color-primary-800:   var(--itps-primary-800);
  --color-primary-900:   var(--itps-primary-900);
  --color-primary-950:   var(--itps-primary-950);

  --color-secondary-25:   var(--itps-secondary-25);
  --color-secondary-50:   var(--itps-secondary-50);
  --color-secondary-100:  var(--itps-secondary-100);
  --color-secondary-200:  var(--itps-secondary-200);
  --color-secondary-300:  var(--itps-secondary-300);
  --color-secondary-400:  var(--itps-secondary-400);
  --color-secondary-500:  var(--itps-secondary-500);
  --color-secondary-600:  var(--itps-secondary-600);
  --color-secondary-700:  var(--itps-secondary-700);
  --color-secondary-800:  var(--itps-secondary-800);
  --color-secondary-900:  var(--itps-secondary-900);
  --color-secondary-950:  var(--itps-secondary-950);

  --color-terciary-50:   var(--itps-terciary-50);
  --color-terciary-100:  var(--itps-terciary-100);
  --color-terciary-300:  var(--itps-terciary-300);
  --color-terciary-500:  var(--itps-terciary-500);

  --color-alert-100:     var(--itps-alert-100);
  --color-alert-200:     var(--itps-alert-200);
  --color-alert-600:     var(--itps-alert-600);
  --color-alert-800:     var(--itps-alert-800);
  --color-alert-900:     var(--itps-alert-900);
  --color-alert-950:     var(--itps-alert-950);
  --color-alert-1000:    var(--itps-alert-1000);

  --color-success-100:   var(--itps-success-100);
  --color-success-200:   var(--itps-success-200);
  --color-success-600:   var(--itps-success-600);
  --color-success-800:   var(--itps-success-800);
  --color-success-900:   var(--itps-success-900);
  --color-success-950:   var(--itps-success-950);

  /* --- Typography (font-family) ---
     Expõe font-sans/font-heading/font-body como utilitários Tailwind.
     `font-mono` mantido p/ blocos de código.
     Sizes/tracking permanecem Tailwind defaults — não sobrescrevemos aqui. */
  --font-sans:    var(--font-sans);
  --font-heading: var(--font-heading);
  --font-body:    var(--font-body);
  --font-mono:    var(--font-mono);
}

/* ==========================================================================
   4. UTILITIES — radius, shadows, blur, typography
   --------------------------------------------------------------------------
   Utilities customizadas que não são geradas automaticamente por @theme.
   ========================================================================== */


/* --- RADIUS semantic group ---
   Use no lugar de rounded-* arbitrário. Cada role tem propósito explícito. */
@utility rounded-card        { border-radius: var(--rounded-card);   }
@utility rounded-form        { border-radius: var(--rounded-form);   }
@utility rounded-circle      { border-radius: var(--rounded-circle); }


/* --- EFFECTS (sombras + blur) ---
   Sombras tintadas azul institucional (#14508F com 10% alpha).
   Hierarquia: medium=cards, large=overlays, extra-large=pop-ups. */
@utility shadow-medium      { box-shadow: var(--shadow-medium); }
@utility shadow-large       { box-shadow: var(--shadow-large); }
@utility shadow-extra-large { box-shadow: var(--shadow-extra-large); }

/* Aliases por use-case */
@utility shadow-card    { box-shadow: var(--shadow-medium); }
@utility shadow-overlay { box-shadow: var(--shadow-large); }
@utility shadow-popup   { box-shadow: var(--shadow-extra-large); }

@utility backdrop-blur-small { backdrop-filter: blur(var(--blur-small)); }

/* --- TYPOGRAPHY: italic combos + body/heading shortcuts ---
   Designer nomeia presets compostos: italic-semibold (italic+600), italic-bold (italic+700).
   Reproduz como @utility pra evitar repetir `italic font-semibold` em componentes. */
@utility italic-semibold {
  font-style: italic;
  font-weight: 600;
}
@utility italic-bold {
  font-style: italic;
  font-weight: 700;
}

3 · Importar

Importe o Sinapse no CSS principal

No CSS principal do projeto, mantenha o Tailwind primeiro e o Sinapse depois. O caminho abaixo considera a estrutura sugerida no passo 2; ajuste apenas o caminho relativo se o seu arquivo principal estiver em outra pasta.

CSS principal do projeto

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

Caminho relativo

O @import do Sinapse usa caminho relativo ao arquivo CSS que está importando. Se o seu CSS principal estiver em outra pasta, ajuste ./ ou ../. Nos guias por stack, abaixo, mostramos o caminho exato para cada tecnologia.

4 · Validar

Primeiro botão — coral Sinapse

Cole este HTML em qualquer página ou componente. Se aparecer um botão coral com bordas arredondadas, a cópia dos arquivos e a ordem das importações funcionaram.

validar-botoes-sinapse.html

<button type="button" class="itps-btn itps-btn--outline">
  <i class="ti ti-plus" aria-hidden="true"></i>
  Adicionar
</button>

<button type="button" class="itps-btn itps-btn--outline">
  Avançar
  <i class="ti ti-arrow-right" aria-hidden="true"></i>
</button>

<button type="button" class="itps-btn itps-btn--outline">
  <i class="ti ti-download" aria-hidden="true"></i>
  Baixar relatório
  <i class="ti ti-external-link" aria-hidden="true"></i>
</button>

Sem cor coral? Verifique: (1) a ordem do @import — Tailwind antes do Sinapse, (2) o caminho do arquivo CSS principal, (3) Tailwind v4 instalado, não v3.

5 · Stack

Escolha a stack do projeto

Depois que o botão coral aparecer, siga o guia da sua stack. Cada guia mostra o arquivo CSS correto, o ponto de importação e o primeiro componente para validar.

React

Projeto com Vite, Tailwind v4, CSS Sinapse, shadcn e primeiro botão.

Next.js

App Router, globals.css, CSS Sinapse, shadcn e primeiro botão.

Vue 3

Projeto com Vite, Tailwind v4, CSS Sinapse, shadcn-vue e primeiro botão.

Nuxt 4

Nuxt, Tailwind v4, CSS Sinapse, shadcn-nuxt e primeiro botão.

Astro

Astro, Tailwind v4, CSS Sinapse e primeiro componente.

HTML

HTML, Tailwind v4, CSS Sinapse e classes itps.