LARAVILT
Laravilt
Pages · Laravilt

Styling Guide

Tailwind CSS styling conventions and theming for Laravilt.

Laravilt uses Tailwind CSS for styling with custom theme extensions and CSS variables for dynamic theming.

Tailwind Configuration

Theme Colors

Laravilt extends Tailwind with custom colors:

javascript

CSS Variables

Theme colors are defined as CSS variables for light/dark mode:

css

Using the cn() Utility

Always use cn() for combining classes:

vue

Badge Colors

Badge variants available:

vue

Dark Mode

Automatic Detection

Laravilt respects system preferences and allows manual override:

typescript

Styling for Dark Mode

Use Tailwind's dark: variant:

vue

Component Styling Patterns

Card Pattern

vue

Form Input Pattern

vue

Button States

vue

Animations

Tailwind Animations

css

Vue Transitions

vue

Responsive Design

Breakpoints

css

Mobile-First Approach

vue

Best Practices

  1. Use semantic color names - text-muted-foreground instead of text-gray-500
  2. Always support dark mode - Add dark: variants for custom styles
  3. Use CSS variables - For colors that need to change with theme
  4. Leverage cn() - For conditional and merged classes
  5. Keep specificity low - Use Tailwind utilities over custom CSS
  6. Test both themes - Verify your components in light and dark mode