Tailwind: extract a component, not a class
When the same pile of utility classes appears three times, the fix is usually a component rather than a custom CSS class.
Hammad Iqbal
Software Engineer
A long className string is the most common complaint about Tailwind. The instinct is to move it into a custom class with @apply. That usually just relocates the mess. Extracting a component keeps the styling and the structure together.
- Repeat it twice, extract it on the third time.
- A component carries markup, props, and styles; a CSS class carries only styles.
- Use design tokens for colors and spacing so the pieces stay consistent.
The rule of three
Copying a class string once or twice is cheap and keeps each use easy to change on its own. By the third copy, a change means editing three places, and that is the signal to extract.
Why a component beats @apply
A button needs markup, variants, a disabled state, and maybe an icon slot. A CSS class can only hold the paint. A component holds all of it behind a clear set of props, so callers describe intent instead of repeating classes.
Let tokens do the consistency
Define colors, radii, and spacing once in the theme and use those names everywhere. Then even separate components stay visually aligned without sharing any code.
Extract components when repetition hurts, and keep consistency in the theme, not in copied class strings.
Have a project this kind of thinking applies to?
Tell me what you're building — I read every message myself.