Tailwind Css

Styling Patterns

Dark Mode

Dark mode is implemented using the class strategy. Use the dark: prefix for dark mode specific styles.

Animation

The project includes tailwindcss-animate and custom keyframes for accordions and carets.

Utilities

• tailwind-merge and clsx are used via the cn utility function (usually in $lib/utils.ts) to merge classes.

Best Practices

• Use HSL Variables: When defining new colors, prefer using HSL variables to maintain consistency with the existing theme and dark mode support.
• Prefer Standard Utilities: Avoid creating custom CSS classes unless absolutely necessary. Stick to Tailwind's utility-first approach.
• Responsive Design: Utilize the custom screen sizes (mobiles, tablet, etc.) for fine-grained responsive control.
• Container: Use the .container class for centered, padded content areas.