Como pensar responsividade no mundo real com Tailwind

📱 Mobile First como filosofia

Tudo no Tailwind nasce para o mobile. Esse é o tamanho padrão. A partir dele, aumentamos o layout conforme a tela cresce. Isso deixa tudo mais consistente, previsível e fácil de manter.

<div className="p-4 md:p-8 lg:p-12 bg-blue-500 text-white">
  Responsive content
</div>

• p-4: base (mobile)
• md:p-8: telas médias
• lg:p-12: desktops grandes

📐 Dividindo o layout em Zonas Responsivas

Um layout bem planejado é dividido em áreas que se adaptam conforme a tela muda. Isso melhora a clareza visual, evita ruídos e organiza a experiência.

<section className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
  <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold">Responsive Title</h2>
  <p className="text-base sm:text-lg lg:text-xl mt-4 text-gray-700">
    This text adapts its size based on the screen width.
  </p>
</section>

<img
  src="/example.jpg"
  alt="Responsive layout example"
  className="w-full max-w-lg mx-auto rounded-xl shadow-md"
/>

<div className="flex flex-col sm:flex-row gap-4 mt-8 justify-center">
  <a href="#" className="px-6 py-3 bg-sky-600 text-white rounded-lg font-semibold">
    Get Started
  </a>
  <a href="#" className="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg font-semibold">
    Learn More
  </a>
</div>

🎯 O que realmente importa na responsividade moderna

Ser responsivo não é apenas “caber na tela”. É sobre equilíbrio visual, ritmo, hierarquia e leitura confortável.

• Escalas tipográficas proporcionais
• Espaçamento com lógica consistente
• Evite duplicar estilos desnecessariamente
• Expandir é melhor do que quebrar o layout

⚡ Exemplo completo

<section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
  <div className="max-w-4xl mx-auto text-center">
    <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900">
      Build truly responsive layouts
    </h2>

    <p className="mt-6 text-lg sm:text-xl text-gray-700 leading-relaxed">
      Learn how to transform designs into real interfaces using TailwindCSS.
    </p>

    <div className="flex flex-col sm:flex-row justify-center gap-4 mt-10">
      <a href="#start" className="px-8 py-4 bg-sky-600 text-white rounded-lg font-semibold">
        Get Started
      </a>
      <a href="#resources" className="px-8 py-4 bg-gray-200 text-gray-800 rounded-lg font-semibold">
        Resources
      </a>
    </div>
  </div>
</section>