Building Reusable Tailwind Components for a React UI

Building Reusable Tailwind Components for a React UI

Reusable Tailwind components keep a React UI clean and consistent. Here is how to build them for an app like DevTinder.

Extract Repeated Class Combinations

When the same Tailwind class combination appears in multiple places, extract it into a component. A Button with the same padding and colors is built once and reused.

Build Primitive Components

Build Button, Input, Card, Avatar, and Badge as primitives with Tailwind classes. These are used everywhere, so consistent styling across the app is automatic.

Use Variants With Props

Make primitives flexible with variant props. A Button might have variants primary, secondary, and danger, each conditionally applying different Tailwind classes.

Extract Feature Components

Larger repeated UI like ProfileCard or ChatBubble becomes a feature component. These compose primitives and add feature-specific layout.

Avoid Overusing @apply

While @apply can reduce repetition, overusing it recreates the named-class problem Tailwind was meant to solve. Prefer extracting React components; use @apply sparingly, mainly for shared primitive base classes.

Use the Prettier Plugin

The official Tailwind Prettier plugin sorts classes automatically. Let it handle ordering so your class strings are consistent and you do not have to think about it.

The Takeaway

Build reusable Tailwind components by extracting repeated class combinations, building primitives like Button and Card, using variant props for flexibility, extracting feature components, avoiding overusing @apply, and using the Prettier plugin for consistent class ordering.