LARAVILT
Laravilt
Pages · Laravilt

Styling & Theming

Tailwind CSS v4 setup, theme variables, brand colors and dark mode in Laravilt apps.

Laravilt uses Tailwind CSS v4 with CSS-first configuration. There is no tailwind.config.js: the theme, sources and variants all live in resources/css/app.css, which the installer publishes for both stacks.

React support requires Laravilt v1.1 or later.

app.css Structure

css

The @source lines matter. If package classes are missing from your build, check that these lines are present and match your stack.

Changing Colors

The variables hold complete color values (for example hsl(...)), and @theme inline maps them to utilities such as bg-primary and text-muted-foreground. To rebrand, change the variables in both :root and .dark:

css

Panel-level colors, fonts and theme presets can also be set from PHP on the panel. See Branding.

Adding Theme Tokens

Add new tokens in CSS rather than in a config file:

css

Then use bg-success, text-success and so on.

Dark Mode

Dark mode is class-based (.dark on <html>). The appearance composable/hook handles light, dark and system, stores the choice in localStorage and in an appearance cookie (so the server can render the right class), and follows system changes:

typescript
tsx

Use the dark: variant for custom styles, and prefer semantic tokens (bg-background, text-muted-foreground) because they switch automatically.

Conventions

  1. Use semantic tokens (text-muted-foreground) instead of raw palette colors.
  2. Combine conditional classes with cn() from @/lib/utils. See Utilities.
  3. Style variants with class-variance-authority, as the UI primitives do (buttonVariants, badgeVariants).
  4. Animations come from tw-animate-css (animate-in, fade-in, slide-in-from-top ...).
  5. Test both themes.