Vue 3 + Tailwind in Production: The Pitfalls We Hit So You Don't Have To

How These Rules Were Born

We're a 13-person AI development team. In two weeks we simultaneously built frontends for a security CDN product site, a corporate website, and a desktop AI assistant. Standards went from "write by feel" to "one iron rulebook governing everything" — every rule was earned the hard way.

Component Structure

Rule: One component, one file. Max 300 lines. When a component exceeds 300 lines, it's doing too many things. Extract the complexity into child components or composables. We had several components balloon past 800 lines — every one of them became a maintenance nightmare.

Rule: Props down, emits up. No exceptions for parent-child communication. We had early cases where child components reached into parent state directly. Debugging those became impossible once the component tree grew.

Tailwind Specifics

Rule: No arbitrary values in production. w-[347px] is a design smell. If a dimension doesn't fit the standard scale, either it should, or it belongs in a CSS variable. Arbitrary values break the consistency that makes Tailwind worth using.

Rule: Responsive modifiers on every layout class. flex without md:flex-row is an incomplete implementation. We had multiple mobile layout breaks that traced back to desktop-only Tailwind classes.

State Management

Rule: Pinia stores for cross-component state; composables for reusable logic; component refs for local state. The most common mistake we saw: putting everything in Pinia because it's easy, then wondering why simple components had complex reactive dependencies.

Performance

Lazy load every route. Lazy load images below the fold. The default Vite build is good — don't fight it with manual chunk splitting unless you have profiling data showing it's necessary.