Customizing Colors and Styles

In this guide, we'll walk you through how to customize the colors and styles of the script.

Important: Updates of the script likely overwrite any style changes you've made. We strongly advise that you create a backup of your modifications. After each update, recompile the assets and double-check to ensure there haven’t been any additions to the files you previously modified in the update.

Prerequisites

Before you start, ensure you have the following installed:

Node.js: This is essential for managing JavaScript packages. If you don't have it, download and install Node.js.
PHP (Optional but required for localhost preview): To run the project on your localhost, ensure PHP is installed on your machine. PHP serves as the backbone for the Laravel framework.

Setting Up

1. Preview on Localhost using Laravel

Note: This step is optional and requires PHP to be installed on your machine.

To preview the application on your localhost:

$ cd path_to_your_project
$ php artisan serve

This will start a web server, and you can view the application in your browser, usually at http://localhost:8000.

2. Install JavaScript Libraries

First, navigate to your project's directory:

$ cd path_to_your_project

Then, install the necessary JavaScript libraries:

$ npm install

3. Building and Developing with Assets

Compiling Assets

The primary step in deploying or testing your changes is to compile your assets (like CSS and JavaScript files). Whether you've made a small tweak or a significant adjustment, before deploying or seeing the final changes, always compile:

$ npm run build

This ensures that all changes are bundled, optimized, and ready for production.

Real-time Development (Optional)

For those who want to see changes as they develop, a real-time development mode is available. However, remember that changes in this mode are not saved for production until you compile the assets.

$ npm run dev

Customizing Colors

Tailwind CSS allows extensive customization of colors and styles. For a detailed guide, refer to the Tailwind CSS documentation.

Open: tailwind.config.js
Modify Colors: Within this file, you’ll find a colors section. Here you can customize the primary and secondary colors of the application. Example:

colors: {
  primary: {
    "50": "#fff7ed",
    ...
  },
  secondary: {
    "50": "#eff6ff",
    ...
  }
}

Adjust these color values as per your requirements.

Modify Font Families: If you want to change the font, there’s a fontFamily section. Update the font names in the order of preference:

fontFamily: {
  'body': ['Inter', 'ui-sans-serif', ...],
  'sans': ['Inter', 'ui-sans-serif', ...]
}

Other Customizations: Feel free to explore and adjust other settings in the tailwind.config.js file.

Remember, every time you make a significant change in styles, it’s a good idea to compile the assets again using npm run build to see the updated changes in your application.

Exploring Additional Styles

Beyond the configurations in tailwind.config.js, additional styles and components can be found in the CSS stylesheets located in the directory resources/css/.

In particular, you might want to explore:

Main Styles:
- Path: resources/css/app.css
This file contains the primary styles used throughout the application. It includes styles that integrate with Tailwind CSS and those that might override or extend default styles.
Custom Components:
- Path: resources/css/custom-components.css
This file is dedicated to styles for any custom components you might have in your application. If you’re looking to change a style for a specific component or element, there’s a good chance it’s defined here.

Feel free to explore these files and adjust styles as needed. Remember that after editing these files, it’s essential to run:

$ npm run build

To see the changes reflect in your application.

Reward Loyalty文档