页面 · 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
- Use semantic color names -
text-muted-foregroundinstead oftext-gray-500 - Always support dark mode - Add
dark:variants for custom styles - Use CSS variables - For colors that need to change with theme
- Leverage cn() - For conditional and merged classes
- Keep specificity low - Use Tailwind utilities over custom CSS
- Test both themes - Verify your components in light and dark mode