Responsividade

Conceito mobile-first #

No Tailwind, os estilos são aplicados primeiro para dispositivos menores (mobile) e, a partir daí, você sobrescreve comportamentos conforme os tamanhos de tela aumentam.

<p class="text-base md:text-lg lg:text-xl">
  Este texto cresce conforme a largura da tela.
</p>

Nesse exemplo:

• text-base: estilo padrão (mobile)

• md:text-lg: a partir de 768px

• lg:text-xl: a partir de 1024px

Breakpoints padrão #

Tailwind define os seguintes breakpoints por padrão:

| Prefixo | Largura mínima | Descrição | | ------- | -------------- | ---------------- | | sm: | 640px | Telas pequenas | | md: | 768px | Tablets | | lg: | 1024px | Laptops médios | | xl: | 1280px | Telas grandes | | 2xl: | 1536px | Monitores largos |

Você pode modificar esses valores no tailwind.config.js se necessário.

Aplicando estilos responsivos #

Os prefixos de breakpoint podem ser usados com qualquer classe do Tailwind:

<!-- Padding que aumenta em telas maiores -->
<div class="p-2 sm:p-4 md:p-6 lg:p-8">
  Bloco com padding adaptável
</div>
 
<!-- Flexbox que muda direção -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="bg-gray-200 p-4 w-full">Item 1</div>
  <div class="bg-gray-300 p-4 w-full">Item 2</div>
</div>

Visibilidade condicional #

Você também pode esconder ou exibir elementos em determinados breakpoints:

<p class="block md:hidden">Visível apenas no mobile</p>
<p class="hidden md:block">Visível a partir de md</p>

Personalizando breakpoints #

No tailwind.config.js, você pode ajustar os tamanhos padrão:

module.exports = {
  theme: {
    screens: {
      xs: '480px',
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    }
  }
}

Boas práticas #

• Comece com estilos para telas pequenas e adicione modificações com breakpoints maiores.

• Teste seu layout em vários tamanhos de tela durante o desenvolvimento.

• Use responsividade não só para layout, mas também para tipografia e espaçamentos.

O sistema responsivo do Tailwind é um dos pilares da sua produtividade, permitindo ajustes rápidos e precisos diretamente no HTML sem quebrar a fluidez do desenvolvimento.