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.

Copy<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:

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:

Copy<!-- 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:

Copy<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:

Copymodule.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.