Breakpoints

EletroDSGuide

Evite definir breakpoints ou tamanhos de tela arbitrários. Utilize os padrões e dimensões aprovados pelo sistema.

Boas Práticas

Quando usar

Tokens de responsividade (sm, md, lg…) só para estruturar colunas e a adaptação da página em diferentes telas.

Tokens de largura (3xs a 7xl) para limitar elementos internos — cards, modais, seções.

Resoluções de desktop padrão (ex.: 1440×800) como referência principal de projeto.

Consultar esta doc para alinhar proporções e limites entre design e engenharia.

Separar a lógica de adaptação da tela das regras que limitam o conteúdo interno.

Quando não usar

Criar pontos de quebra manuais (ex.: 900px) ou medidas fixas fora das escalas oficiais.

Confundir escalas: tokens de mesmo nome (ex.: `sm`) têm valores/funções diferentes para tela e componente.

Projetar pensando só em telas grandes, sem prever a quebra em telas menores.

Inverter as lógicas: token de conteúdo ditando regra de tela, ou vice-versa.

Forçar medidas estáticas; confie no comportamento dinâmico da estrutura.

Breakpoints

Referência oficial das escalas de adaptação de tela e limites de conteúdo, que possuem medidas distintas.

Viewport — Tailwind

Larguras mínimas de tela para layout responsivo. Use com prefixos sm:, md:, lg:, xl: e 2xl: no código.

Name	Value
	640px
	768px
	1024px
	1280px
	1536px

Container — Tailwind

Larguras máximas de conteúdo. Use para limitar a área útil de cards, modais e seções — independente do viewport.

Name	Value
	256px
	288px
	320px
	384px
	448px
	512px
	576px
	672px
	768px
	896px
	1024px
	1152px
	1280px

Regras de aplicação

A implementação separa a adaptação da tela (responsividade) das regras que limitam a largura máxima do conteúdo.

Layouts divididos: acomodam menus e conteúdo lado a lado quando há espaço.
Avisos e diálogos: mantêm largura menor para prender a atenção.
Limites de conteúdo: impedem perda de legibilidade em telas muito largas.
Resolução base (Figma): ao exportar telas, use sempre 1440×800.

Cuidado com as siglas iguais. Confirme a tabela correta antes de aplicar a medida na interface.

Comportamento responsivo

Os tokens acima dizem quando a tela quebra; o como cada peça se adapta mora na página do próprio componente (lente UI) — esta Foundation só dá o princípio e aponta onde está cada detalhe.

Mobile não é "encolher o desktop" — é recolher zonas e priorizar a ação primária. A página adapta a estrutura (viewport sm/md/lg); o conteúdo interno continua limitado pelos tokens de largura.

Onde a adaptação de cada peça é documentada:

Peça	Documentação
Subheader (título + CTAs)	Componentes › Subheader
Filter Bar (persistente) e Filter Search (overlay)	Componentes › Filter Bar · Filter Search
Tabela / Lista / Cards	Componentes › Table
Modal e overlays	Componentes › Modal
Sidebar (vira drawer) e composição da página	Padrões › Estrutura de Index · Estrutura de Documento
Serviços (Genius · Chat · Carrinho)	os respectivos padrões
Interação (alvos de toque ≥ 44px, nada dependente de hover)	Foundations › Acessibilidade

Exemplos de uso

<!-- Layout responsivo (viewport) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">...</div>

<!-- Conteúdo com largura máxima (container) -->
<div class="max-w-lg mx-auto">...</div>

Veja tambémEstrutura de Index Estrutura de Documento Acessibilidade