blog
Frontend

Tailwind CSS: 15 dicas que todo vibecoder precisa

Classes úteis, atalhos e padrões que vão acelerar seu desenvolvimento.

hidden: true

Tailwind CSS: 15 dicas

1. Mobile-first

Tailwind é mobile-first. Classes sem prefixo = mobile. Adicione breakpoints para telas maiores:

<div class="text-sm md:text-base lg:text-lg">Texto responsivo</div>

2. Dark mode fácil

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">Suporte a dark mode</div>

Ative no tailwind.config.js:

module.exports = { darkMode: "class" };

3. Group hover

<div class="group">
  <h2 class="group-hover:text-orange-500">Título</h2>
  <p class="group-hover:opacity-100 opacity-0">Descrição</p>
</div>

4. Truncate text

<p class="truncate">Texto muito longo que será cortado...</p>
<p class="line-clamp-2">Limita a 2 linhas com ellipsis...</p>

5. Aspect ratio

<div class="aspect-video">16:9</div>
<div class="aspect-square">1:1</div>

6. Grid rápido

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

7. Gradient text

<h1 class="bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
  Texto com gradiente
</h1>

8. Animação de entrada

<div class="animate-fade-in">Aparece suavemente</div>

No config:

module.exports = {
  theme: {
    extend: {
      animation: {
        "fade-in": "fadeIn 0.5s ease-out",
      },
      keyframes: {
        fadeIn: {
          from: { opacity: 0, transform: "translateY(10px)" },
          to: { opacity: 1, transform: "translateY(0)" },
        },
      },
    },
  },
};

9. Container centralizado

<div class="mx-auto max-w-4xl px-4">Conteúdo centralizado</div>

10. Divider

<div class="divide-y divide-gray-200">
  <div class="py-4">Item 1</div>
  <div class="py-4">Item 2</div>
</div>

11. Ring para focus

<input class="focus:ring-2 focus:ring-orange-500 focus:outline-none" />

12. sr-only para acessibilidade

<button>
  <svg>...</svg>
  <span class="sr-only">Fechar menu</span>
</button>

13. Size shortcut

<div class="size-10">width: 40px, height: 40px</div>

14. Scroll snap

<div class="snap-x snap-mandatory flex overflow-x-auto">
  <div class="snap-center min-w-full">Slide 1</div>
  <div class="snap-center min-w-full">Slide 2</div>
</div>

15. @apply para componentes

/* globals.css */
@layer components {
  .btn-primary {
    @apply bg-orange-500 text-white px-4 py-2 rounded-lg
           hover:bg-orange-600 transition-colors;
  }
}