Question

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

Solved · 8 views · asked last week by yuki_builds · edited

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_ana7 days ago · edited

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

felix_codes7 days ago · edited

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

Comment

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