Styling Guidelines

Minimize Wrapper Elements

Good (Direct Application)

<main class="flex-1 mx-auto max-w-7xl">
	{@render children()}
</main>

Avoid (Unnecessary Wrapper)

<main class="flex-1">
	<div class="mx-auto max-w-7xl">
		{@render children()}
	</div>
</main>

Tailwind Best Practices

• Use the

  cn()

  utility from

  $lib/utils

  for combining classes conditionally
• Prefer utility classes over custom CSS
• Use

  tailwind-variants

  for component variant systems
• Follow the

  background

  /

  foreground

  convention for colors
• Leverage CSS variables for theme consistency