Lição 22 de 30

Breakpoints Customizados no Tailwind — Web Academy

Embora os 5 breakpoints padrão do Tailwind (de sm a 2xl) atendam à imensa maioria dos websites comerciais, projetos corporativos de grande porte frequentemente encontram cenários singulares: smartphones dobráveis com telas ultra-compactas (como Galaxy Z Flip), monitores 4K e estações Ultrawide que exigem pontos de quebra acima de 1920px, telas operadas em orientações específicas (totens verticais ou tablets em modo paisagem) e relatórios impressos. No Tailwind CSS, você possui controle cirúrgico sobre a chave screens do arquivo de configuração, permitindo estender ou redefinir media queries com suporte nativo a orientações e à variante de impressão print:.

📑 Índice do Conteúdo

1. Estendendo Breakpoints no tailwind.config.js (theme.extend.screens)

Ao customizar os pontos de quebra, você pode adotar dois caminhos distintos no seu tailwind.config.js:

Substituição Total (theme.screens): Apaga os 5 breakpoints nativos e define um conjunto 100% novo (raramente recomendado, pois remove sm, md, etc.).
Extensão Harmoniosa (theme.extend.screens): Preserva a escala padrão de 640px a 1536px e adiciona novos pontos específicos, como xs (475px) e 3xl (1920px).

JavaScript 13 linhas

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '475px',    // Smartphones compactos e dobráveis
        '3xl': '1920px',  // Monitores Full HD amplos e 2K
        '4xl': '2560px',  // Monitores Ultrawide e 4K
      },
    },
  },
  plugins: [],
}

// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'xs': '475px',    // Smartphones compactos e dobráveis
'3xl': '1920px',  // Monitores Full HD amplos e 2K
'4xl': '2560px',  // Monitores Ultrawide e 4K
},
},
},
plugins: [],
}

Com essa configuração, você pode escrever classes como xs:grid-cols-2 ou 3xl:max-w-7xl com total naturalidade no seu HTML.

🧪 Quer testar breakpoints customizados e print no Playground IDE?
Abrir no Playground IDE →

2. Media Queries de Intervalo (Range Queries) e Modificadores max-*

Por padrão, os breakpoints são baseados em min-width (mobile-first). No entanto, certas demandas de design exigem que um estilo seja aplicado apenas em uma faixa restrita de tela (por exemplo, estritamente em tablets, sem afetar celulares nem desktops).

O Tailwind suporta definir intervalos com objetos { min, max }:

JavaScript 10 linhas

// tailwind.config.js (Intervalo fixo para tablets)
module.exports = {
  theme: {
    extend: {
      screens: {
        'tablet-only': { 'min': '768px', 'max': '1023px' },
      },
    },
  },
}

// tailwind.config.js (Intervalo fixo para tablets)
module.exports = {
theme: {
extend: {
screens: {
'tablet-only': { 'min': '768px', 'max': '1023px' },
},
},
},
}

Além disso, nas versões modernas do Tailwind, você dispõe nativamente dos modificadores inversos max-* sem precisar configurar nada:

max-sm:p-2: Aplica o padding apenas abaixo de 640px (@media (max-width: 639px)).
max-md:hidden: Oculta o elemento em qualquer tela inferior a 768px.

3. Telas Especiais: Orientação (portrait/landscape) e Impressão (print:)

O ecossistema do Tailwind inclui variantes nativas para lidar com o ambiente físico do dispositivo:

1. Orientação Física: portrait: e landscape:

A variante portrait: aplica estilos quando a altura do dispositivo for maior que a largura (celular em pé). Já landscape: é ativada quando o usuário gira o celular deitado ou opera em monitores widescreen. Exemplo: portrait:flex-col landscape:flex-row.

2. Impressão Amigável: print:

A variante print: compila para @media print. Ela permite eliminar elementos inúteis na folha de papel (menus, rodapés, banners e botões) com print:hidden e forçar texto preto puro e fundo branco com print:text-black print:bg-white print:shadow-none.

4. Matriz de Variantes de Tela e Mídia Especial

Consulte a tabela abaixo para selecionar o modificador ideal para cada contexto de dispositivo:

Variante	Tipo de Mídia / Condição	Exemplo Prático	Caso de Uso Recomendado
`xs:`	min-width: 475px (custom)	`xs:grid-cols-2`	Celulares com resolução um pouco maior que a média.
`3xl:`	min-width: 1920px (custom)	`3xl:max-w-7xl`	Telas 2K, Ultrawide e monitores gamer/profissionais.
`max-md:`	max-width: 767px	`max-md:hidden`	Ocultar barras laterais estritamente em telas menores que o tablet.
`landscape:`	orientation: landscape	`landscape:hidden`	Avisar o usuário para desvirar o celular em jogos ou leitores.
`print:`	@media print	`print:hidden`	Ocultar botões, menus e fundos escuros ao imprimir faturas/contratos.

5. Exemplo Prático: Fatura Comercial Responsiva e Otimizada para Impressão

O componente a seguir ilustra um documento de cobrança SaaS profissional. Na tela, ele exibe botões de ação, modo escuro e sombras profundas. Ao acionar a impressão (Ctrl+P ou Cmd+P), a variante print: remove as barras de navegação, desativa sombras, remove fundos escuros e garante economia de tinta no papel:

HTML5 66 linhas

<div class="max-w-3xl mx-auto p-4 sm:p-8 bg-slate-900 print:bg-white text-slate-100 print:text-black rounded-3xl print:rounded-none border border-slate-800 print:border-none shadow-2xl print:shadow-none">
 
    <!-- CABEÇALHO DA FATURA -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-slate-800 print:border-slate-300">
        <div>
            <span class="text-xs font-bold uppercase tracking-wider text-emerald-400 print:text-emerald-700">
                Recibo de Pagamento Oficial
            </span>
            <h2 class="text-2xl font-black text-white print:text-black mt-1">Fatura #WZW-2026-881</h2>
            <p class="text-xs text-slate-400 print:text-slate-600 mt-0.5">Emissão: 29 de Outubro de 2026</p>
        </div>
 
        <!-- Botão visível na tela mas ocultado na folha impressa (print:hidden) -->
        <div class="print:hidden flex items-center gap-2">
            <button onclick="window.print()" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs rounded-xl shadow-lg transition-all active:scale-95">
                🖨️ Imprimir Recibo
            </button>
        </div>
    </div>
 
    <!-- DETALHES DO CLIENTE E SERVIÇO -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 my-6 text-xs">
        <div>
            <span class="font-bold uppercase tracking-wider text-slate-400 print:text-slate-500">Contratante:</span>
            <p class="font-semibold text-white print:text-black mt-1 text-sm">Flávio Estaiano / Ecossistema Economaster</p>
            <p class="text-slate-400 print:text-slate-600">Portal Web-ZoneWare • Dev Studio 2.0</p>
        </div>
        <div class="sm:text-right">
            <span class="font-bold uppercase tracking-wider text-slate-400 print:text-slate-500">Status:</span>
            <p class="font-bold text-emerald-400 print:text-emerald-700 mt-1 text-sm">&check; Liquidado via Pix</p>
            <p class="text-slate-400 print:text-slate-600">Autenticação: 9f82a17b823e4c01</p>
        </div>
    </div>
 
    <!-- TABELA DE ITENS DA FATURA -->
    <table class="w-full text-left text-xs mb-6 border-collapse">
        <thead>
            <tr class="border-b border-slate-800 print:border-slate-300 text-slate-400 print:text-slate-600">
                <th class="py-2">Descrição da Licença</th>
                <th class="py-2 text-right">Valor</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-slate-800/60 print:divide-slate-200">
            <tr>
                <td class="py-3 font-medium text-slate-200 print:text-black">Assinatura Web Academy Pro — Acesso Vitalício às 30 Aulas de Tailwind</td>
                <td class="py-3 text-right font-bold text-white print:text-black">R$ 497,00</td>
            </tr>
            <tr>
                <td class="py-3 font-medium text-slate-200 print:text-black">Suíte Dev Tools — Acesso à API de Imagens, PDFs e Conversores</td>
                <td class="py-3 text-right font-bold text-white print:text-black">R$ 190,00</td>
            </tr>
        </tbody>
        <tfoot>
            <tr class="border-t-2 border-slate-700 print:border-black font-bold text-sm">
                <td class="py-3 text-white print:text-black">Total Pago:</td>
                <td class="py-3 text-right text-emerald-400 print:text-black font-black text-base">R$ 687,00</td>
            </tr>
        </tfoot>
    </table>
 
    <!-- AVISO DE RODAPÉ -->
    <div class="pt-4 border-t border-slate-800 print:border-slate-300 text-[11px] text-slate-500 print:text-slate-600 text-center">
        Documento gerado eletronicamente por Web-ZoneWare (webzoneware.com). Válido como comprovante financeiro.
    </div>
 
</div>

<div class="max-w-3xl mx-auto p-4 sm:p-8 bg-slate-900 print:bg-white text-slate-100 print:text-black rounded-3xl print:rounded-none border border-slate-800 print:border-none shadow-2xl print:shadow-none">
<!-- CABEÇALHO DA FATURA -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-slate-800 print:border-slate-300">
<div>
<span class="text-xs font-bold uppercase tracking-wider text-emerald-400 print:text-emerald-700">
Recibo de Pagamento Oficial
</span>
<h2 class="text-2xl font-black text-white print:text-black mt-1">Fatura #WZW-2026-881</h2>
<p class="text-xs text-slate-400 print:text-slate-600 mt-0.5">Emissão: 29 de Outubro de 2026</p>
</div>
<!-- Botão visível na tela mas ocultado na folha impressa (print:hidden) -->
<div class="print:hidden flex items-center gap-2">
<button onclick="window.print()" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs rounded-xl shadow-lg transition-all active:scale-95">
🖨️ Imprimir Recibo
</button>
</div>
</div>
<!-- DETALHES DO CLIENTE E SERVIÇO -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 my-6 text-xs">
<div>
<span class="font-bold uppercase tracking-wider text-slate-400 print:text-slate-500">Contratante:</span>
<p class="font-semibold text-white print:text-black mt-1 text-sm">Flávio Estaiano / Ecossistema Economaster</p>
<p class="text-slate-400 print:text-slate-600">Portal Web-ZoneWare • Dev Studio 2.0</p>
</div>
<div class="sm:text-right">
<span class="font-bold uppercase tracking-wider text-slate-400 print:text-slate-500">Status:</span>
<p class="font-bold text-emerald-400 print:text-emerald-700 mt-1 text-sm">&check; Liquidado via Pix</p>
<p class="text-slate-400 print:text-slate-600">Autenticação: 9f82a17b823e4c01</p>
</div>
</div>
<!-- TABELA DE ITENS DA FATURA -->
<table class="w-full text-left text-xs mb-6 border-collapse">
<thead>
<tr class="border-b border-slate-800 print:border-slate-300 text-slate-400 print:text-slate-600">
<th class="py-2">Descrição da Licença</th>
<th class="py-2 text-right">Valor</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-800/60 print:divide-slate-200">
<tr>
<td class="py-3 font-medium text-slate-200 print:text-black">Assinatura Web Academy Pro — Acesso Vitalício às 30 Aulas de Tailwind</td>
<td class="py-3 text-right font-bold text-white print:text-black">R$ 497,00</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-200 print:text-black">Suíte Dev Tools — Acesso à API de Imagens, PDFs e Conversores</td>
<td class="py-3 text-right font-bold text-white print:text-black">R$ 190,00</td>
</tr>
</tbody>
<tfoot>
<tr class="border-t-2 border-slate-700 print:border-black font-bold text-sm">
<td class="py-3 text-white print:text-black">Total Pago:</td>
<td class="py-3 text-right text-emerald-400 print:text-black font-black text-base">R$ 687,00</td>
</tr>
</tfoot>
</table>
<!-- AVISO DE RODAPÉ -->
<div class="pt-4 border-t border-slate-800 print:border-slate-300 text-[11px] text-slate-500 print:text-slate-600 text-center">
Documento gerado eletronicamente por Web-ZoneWare (webzoneware.com). Válido como comprovante financeiro.
</div>
</div>

🎯 Dica Pro: Sempre Use theme.extend.screens para Não Destruir sm: a 2xl:!

Se você configurar seus breakpoints customizados diretamente dentro de theme: { screens: { ... } }, você estará instruindo o Tailwind a descartar completamente todos os 5 breakpoints padrão (sm, md, lg, xl, 2xl). Como consequência, qualquer classe responsiva nativa usada em outros componentes do site quebrará instantaneamente! A boa prática obrigatória da indústria é declarar novos tamanhos sempre dentro de theme.extend.screens, preservando a harmonia da escala padrão e somando novos superpoderes ao seu tema.

6. Ferramentas Correlatas da Rede Web-ZoneWare

Valide telas responsivas e exportação de documentos na suíte:

Playground Web IDE: Ambiente interativo para compor regras de telas customizadas e disparar impressões em tempo real.
Central do Desenvolvedor Web: Utilitários de cálculo de resoluções, DPI e emuladores de telas.
Lição 21 de Tailwind CSS: Revise a filosofia base mobile-first e os breakpoints nativos de 640px a 1536px.
Lição 03 de Tailwind CSS: Relembre a anatomia completa do arquivo tailwind.config.js.
Limpador e Formatador CSS: Otimize a sintaxe de media queries personalizadas.

7. Links Oficiais e Documentação de Referência

Consulte a documentação técnica oficial sobre configuração avançada de telas:

🛠️ Laboratório Prático & Prática Imediata

Aplique o que você aprendeu nesta lição

Utilize nossas ferramentas online gratuitas para experimentar os conceitos ou teste o código ao vivo no Playground IDE.

💻 Desenvolvedor & Código

Editor de Códigos Web Online

Ambiente com destaque de sintaxe para você testar tags, tabelas e scripts na hora.

Abrir Ferramenta Online

⚡ Live Code Studio

Playground Web Online

Escreva seu código HTML, CSS ou JavaScript e veja o resultado renderizado ao vivo no navegador com zero configuração.

⚡ Codificar no Playground IDE