Tailwind Component Patterns

Tailwind CSS takes a utility-first approach to styling. Instead of writing custom CSS, you compose classes directly in your markup. Here are practical patterns for keeping things maintainable at scale.

Pattern 1 — Card Component

Cards are everywhere. Here's a clean, reusable pattern:

<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm
            hover:shadow-md transition-shadow">
  <h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
  <p class="mt-2 text-gray-600">Card description goes here.</p>
  <a href="#" class="mt-4 inline-block text-blue-600 hover:underline">
    Read more →
  </a>
</div>

Key ideas:

  • transition-shadow + hover:shadow-md for subtle interaction feedback
  • Consistent spacing with mt-2, mt-4
  • Semantic color choices: gray-900 for headings, gray-600 for body text

Pattern 2 — Badge / Label

Use badges to tag content with categories or labels:

<!-- Neutral -->
<span class="text-xs bg-gray-100 text-gray-700 px-2 py-0.5 rounded">
  default
</span>

<!-- Coloured -->
<span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">
  htmx
</span>

<!-- Pill style -->
<span class="text-sm bg-green-100 text-green-700 px-3 py-1 rounded-full">
  tailwind
</span>

Pattern 3 — Responsive Navigation

<nav class="flex flex-col sm:flex-row gap-2 sm:gap-6">
  <a href="/" class="text-gray-700 hover:text-blue-600">Home</a>
  <a href="/blog" class="text-gray-700 hover:text-blue-600">Blog</a>
  <a href="/about" class="text-gray-700 hover:text-blue-600">About</a>
</nav>

On mobile the links stack vertically; on sm and above they sit in a row.

Pattern 4 — Prose Content Wrapper

For long-form markdown content, use Tailwind's typography plugin or a simple wrapper:

<article class="max-w-prose mx-auto text-gray-800 leading-relaxed
                [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-8 [&_h2]:mb-4
                [&_p]:mb-4
                [&_a]:text-blue-600 [&_a]:underline">
  <!-- rendered markdown goes here -->
</article>

The arbitrary variant selectors ([&_h2], [&_p], [&_a]) let you style child elements without adding classes to every tag — perfect for CMS or markdown-generated HTML.

Takeaways

  1. Compose, don't abstract too early — Reach for @apply only when a pattern repeats many times
  2. Use design tokens — Stick to Tailwind's default scale for colors, spacing, and typography
  3. Responsive by default — Start mobile, layer on sm:, md:, lg: as needed
  4. Transitions matter — Small transition-* classes make interactions feel polished