Tailwind Conventions (Frontend Standard)

Goals

• consistent UI across the app
• predictable styling approach (avoid one-off CSS patterns)
• easy to build and maintain a reusable component library

Rules (required)

• Tailwind is the default styling mechanism for the UI.
• Prefer using the project’s Tailwind theme tokens (colors, spacing, radii) over arbitrary values.
• Do not introduce a second styling system without explicit documentation and buy-in.

Tokens (required)

Each project should define and use a consistent token set (project-specific values live in the repo):

• colors
• typography (font families, sizes, weights, line heights)
• spacing scale
• border radius
• shadows
• container widths and breakpoints

Utility usage guidance

• Prefer composition through reusable components (src/components/) rather than long, repeated class strings across features.
• If a class list becomes hard to read or repeated, lift it into a shared component or helper.