Color customization & Tailwind

What is Tailwind CSS?

Tailwind CSS provides a set of utility classes that let you style elements without writing custom CSS. For example, instead of writing a CSS rule like background-color: blue;, you can use a class like bg-blue-500 directly in your configuration. These classes control colors, gradients, text styles, borders, and more.

Accessing Tailwind CSS Classes

To use Tailwind CSS in the admin menu, you apply the appropriate classes in the configuration file (e.g., Config.dbPage). The classes are added to fields like className, bg, text, or border to style specific elements. Tailwind’s classes follow a consistent naming pattern, such as:

• bg- for background colors (e.g., bg-blue-50 for a light blue background).

• text- for text colors (e.g., text-white for white text).

• border- for border colors (e.g., border-blue-200 for a light blue border).

• bg-gradient-to- for gradients (e.g., bg-gradient-to-r from-yellow-400 to-yellow-600 for a gradient from yellow to darker yellow).

You can explore the full list of Tailwind classes on the official Tailwind CSS documentation. For example, to change a background to red, you might use bg-red-500, or for a green text color, use text-green-600.

Example Configuration

Let’s break down the provided configuration to show how Tailwind CSS classes are used to style the admin menu’s dashboard page. This example is from the Config.dbPage settings:

Config.dbPage = { -- dashboardpage
    topplayersorderby = "playtime", -- money, playtime, level, xp
    topplayerslimit = 5,
    jobColors = {
        [1] = {
            label = "CAS WORKER",
            bg = "bg-blue-50", -- Light blue background
            text = "text-blue-600", -- Medium blue text
            border = "border-blue-200" -- Light blue border
        },
    },

    rankBadge = {
        [1] = {
            className = "bg-gradient-to-r from-yellow-400 to-yellow-600 text-white", -- Gold gradient badge with white text
        },
        [2] = {
            className = "bg-gradient-to-r from-gray-300 to-gray-500 text-white", -- Silver gradient badge with white text
        },
        [3] = {
            className = "bg-gradient-to-r from-orange-400 to-orange-600 text-white", -- Bronze gradient badge with white text
        },
    },
    defaultRankBadgeClass = "bg-gradient-to-r from-blue-400 to-blue-600 text-white", -- Default blue gradient badge with white text
}

Explanation of the Configuration

1. Job Colors (jobColors)

   • This section styles job-related elements, like a "CAS WORKER" label.

   • bg-blue-50: Sets a very light blue background for the element.

   • text-blue-600: Makes the text a medium-dark blue.

   • border-blue-200: Adds a light blue border around the element.

   • How it works: These classes are applied to a job label or card in the admin menu. For example, a "CAS WORKER" card will have a light blue background, blue text, and a subtle blue border.

2. Rank Badges (rankBadge)

   • This section styles badges for top players (e.g., 1st, 2nd, 3rd place).

   • Each badge uses a className field to combine multiple Tailwind classes:

     • Rank 1: bg-gradient-to-r from-yellow-400 to-yellow-600 text-white

       • bg-gradient-to-r: Creates a gradient that flows from left to right.

       • from-yellow-400: Starts with a light yellow color.

       • to-yellow-600: Ends with a darker yellow, giving a gold-like effect.

       • text-white: Sets the text color to white for contrast.

     • Rank 2: bg-gradient-to-r from-gray-300 to-gray-500 text-white

       • A silver-like gradient from light gray to darker gray, with white text.

     • Rank 3: bg-gradient-to-r from-orange-400 to-orange-600 text-white

       • A bronze-like gradient from light orange to darker orange, with white text.

   • How it works: These classes style badges displayed in the admin menu’s leaderboard. For example, the 1st-place badge will have a shiny gold gradient with white text.

3. Default Rank Badge (defaultRankBadgeClass)

   • bg-gradient-to-r from-blue-400 to-blue-600 text-white: Applies a blue gradient (light to darker blue) with white text for any rank badge not specified in rankBadge.

   • How it works: If a player’s rank isn’t 1st, 2nd, or 3rd, their badge will use this default blue gradient style.

How to Customize Styles

To change the appearance, you can modify the Tailwind classes in the configuration. Here’s how you can do it:

1. Change Colors: Replace color classes like bg-blue-50 with another color, such as bg-red-50 for a light red background. Tailwind supports colors like red, green, purple, etc., with shades from 50 (lightest) to 900 (darkest).

2. Adjust Gradients: Modify gradient classes like bg-gradient-to-r to bg-gradient-to-t (top to bottom) or change the colors (e.g., from-green-400 to-green-600).

3. Combine Classes: You can add more classes to className or other fields. For example, className = "bg-blue-500 text-white rounded-lg p-2" adds a blue background, white text, rounded corners, and padding.

4. Find Classes: Visit the Tailwind CSS documentation to find classes for backgrounds, text, borders, padding, margins, and more.

Example: Adding a New Rank Badge

If you want to add a 4th-place badge with a green gradient, you can add this to rankBadge:

[4] = {
    className = "bg-gradient-to-r from-green-400 to-green-600 text-white",
},

This creates a badge with a green gradient and white text, similar to the existing badges.

Tips for Using Tailwind CSS

• Test Small Changes: Change one class at a time and test to see the effect in the admin menu.

• Use Descriptive Classes: Tailwind’s naming is intuitive (e.g., text-red-500 for red text, p-4 for padding). Refer to the documentation for clarity.

• Combine Classes: You can combine multiple classes in className (e.g., bg-blue-500 text-white shadow-md for a blue background, white text, and a shadow).

• Preview Colors: Use Tailwind’s color palette to pick the right shade (e.g., blue-500 vs. blue-700).

By using Tailwind CSS classes in the configuration, you can easily customize the admin menu’s look without writing custom CSS. Just copy and paste the classes into the appropriate fields, and the styles will apply automatically.