Question

v0 generated a component with 400 lines of Tailwind, how do I keep it maintainable?

Solved · 142 viewsasked yesterday by

Everything works but every element has 15 classes and the same card styling is copied six times. When I change a color I miss half of them.

What I’ve tried

Asked v0 to "use a design system", it added shadcn but kept the inline classes.

Comment

2 answers

Marked as helpful by the asker

dev_anayesterday

Two moves, in order:

Pull repeated class strings into components, not into @apply. <Card> with the 15 classes once, used six times.
Put colors in CSS variables (--accent) and reference them in Tailwind via the theme. Then a color change is one line.

Ask v0 per component: "extract the repeated card markup into a Card component, keep the classes identical". Small, checkable steps beat "use a design system".

Comment

Card component done, six copies became one. Doing the CSS variables next.

yuki_builds yesterday

Colors are in variables now. Changed the accent once and every card followed. Thank you!

yuki_builds 21 hours ago

felix_codesyesterday

And run npx prettier-plugin-tailwindcss once. Sorted classes make the duplicates visible.

Comment

Small correction: prettier-plugin-tailwindcss isn't something you run with npx. Install it as a dev dependency and add it to plugins in your Prettier config, then npx prettier --write .. aiko_n 24 hours ago

Right, typed that too fast. Thanks. felix_codes 24 hours ago

Keyboard shortcuts

v0 generated a component with 400 lines of Tailwind, how do I keep it maintainable?

What I’ve tried

2 answers

Your answer

v0 generated a component with 400 lines of Tailwind, how do I keep it maintainable?

What I’ve tried

2 answers

Related

Your answer