Data-Driven UI

Stop copy-pasting identical HTML blocks. Learn to render lists from data arrays, use @apply wisely, and keep your Tailwind classes readable.

Map Over Data Arrays

When you have a list of cards, features, or items that share the same layout, define your data as an array and use .map() to render them. One template, unlimited items.

❌ Copy-Pasted Cards

<div class="rounded-lg border p-4">
  <h3>Feature 1</h3>
  <p>Description for feature 1</p>
</div>
<div class="rounded-lg border p-4">
  <h3>Feature 2</h3>
  <p>Description for feature 2</p>
</div>
<div class="rounded-lg border p-4">
  <h3>Feature 3</h3>
  <p>Description for feature 3</p>
</div>
{/* 😩 Same structure, 3 times */}

✅ Data-Driven Rendering

const features = [
  { title: "Feature 1", desc: "..." },
  { title: "Feature 2", desc: "..." },
  { title: "Feature 3", desc: "..." },
];

{features.map((f) => (
  <div key={f.title}
    className="rounded-lg border p-4">
    <h3>{f.title}</h3>
    <p>{f.desc}</p>
  </div>
))}

// ✅ One template, any number of items

Real-World Example: The feature cards on the Introduction page of this very application are rendered using this exact .map() pattern. Any time you see a repeating card grid, this is the professional approach.

The @apply Directive

Tailwind provides @apply to extract utility patterns into traditional CSS classes. This is useful for elements you cannot componentize, like global prose styles or third-party overrides.

Using @apply in globals.css

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

/* Now use it like a regular class: */
<button class="btn-primary">Save</button>
<button class="btn-primary">Submit</button>

Warning — Use Sparingly! The Tailwind docs explicitly say: "Don't use @apply just to make things look cleaner." If you're in a component framework (React, Vue, Svelte), extracting a React component is almost always better. Reserve @apply for truly global, non-componentizable styles.

Class Ordering Conventions

When you have many Tailwind classes on a single element, a consistent ordering makes them scannable at a glance. Here is the recommended order used in professional codebases.

Order	Category	Examples
1	Layout	flex, grid, block, hidden
2	Position & Sizing	relative, w-full, h-10
3	Spacing	p-4, px-6, mt-2, gap-3
4	Typography	text-sm, font-bold, leading-relaxed
5	Colors & Background	bg-white, text-neutral-900
6	Borders & Effects	rounded-lg, border, shadow-md
7	Interactivity	hover:bg-blue-600, transition-all

Automation: You can use the official prettier-plugin-tailwindcss Prettier plugin to automatically sort your classes into the recommended order on every save. Zero manual effort!