Colors & Styles

Deprecated as of version 3.0.0. Any modifications to core files will be overwritten during updates.

Reward Loyalty uses Tailwind CSS 4 for styling. You can customize colors and styles by modifying the CSS configuration.

Prerequisites

To customize styles, you need:

• Node.js installed
• Access to source files
• Basic CSS/Tailwind knowledge

Understanding Tailwind 4

Tailwind CSS 4 uses CSS-first configuration with the @theme directive. Configuration happens in CSS files, not JavaScript.

Location: resources/css/app.css

Customizing Colors

Define custom colors using CSS variables:

@theme {
  --color-primary-50: #fff7ed;
  --color-primary-100: #ffedd5;
  --color-primary-500: #f97316;
  --color-primary-600: #ea580c;
  --color-primary-700: #c2410c;
  
  --color-secondary-50: #eff6ff;
  --color-secondary-500: #3b82f6;
}

These colors cascade throughout the application.

Building Assets

After making changes, rebuild the assets:

npm install    # First time only
npm run build  # Compile for production

During development, use:

npm run dev    # Watch for changes

Custom Components

Additional styles are defined in:

• resources/css/app.css — Main styles
• Component-specific files as needed

Important Notes

Updates may overwrite changes. When updating Reward Loyalty, your custom styles may be replaced. Always:

1. Back up your customizations
2. Document what you changed
3. Reapply changes after updates
4. Rebuild assets with npm run build

Typography

Customize fonts in your theme configuration:

@theme {
  --font-display: "Your Font", sans-serif;
  --font-body: "Your Font", sans-serif;
}

Include font files or use web fonts as needed.