Tailwind CSS UI Library Configuration Guide

Using a prefix

Prefix Frutjam classes using the same Tailwind CSS prefix configuration method. Ensure that the prefix format for elements is consistent for both Frutjam and TailwindCSS classes.

Use the same format (e.g., tw:) for both to avoid conflicts. To configure Frutjam, follow the same prefix setup as Tailwind.

css

@import "tailwindcss" prefix(tw);
@import "frutjam";

html

<button type="button" class="tw:btn tw:btn-primary">Send mail</button>

Create a custom theme

To create your own theme, just assign your color values to the provided CSS variables within a [data-theme="your-theme-name"] selector

1. The "Automatic" Approach (Minimal)

In this version, we omit the --color-on-* variables. Frutjam detects the missing variables and calculates the optimal text color—usually flipping between a very light or very dark OKLCH value—to ensure the component remains accessible and readable.

css

// In your tailwind.css file
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-info: oklch(0.685 0.169 237.323);
        --color-success: oklch(0.792 0.209 151.711);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-error: oklch(0.577 0.245 27.325);
    }
}

2. The "Manual" Approach (Full Control)

In this version, we explicitly define the --color-on-* variables. This is ideal when you have specific brand guidelines (like using a tinted off-white instead of pure white) or when you want to achieve a specific "vibe," such as a low-contrast sophisticated look that still passes accessibility checks.

css

// In your tailwind.css file
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-on-base:oklch(0.22 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-on-neutral: oklch(1 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-on-primary: oklch(96.2% 0.018 272.314);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-on-secondary: oklch(1 0 0);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-on-accent: oklch(1 0 0);
        --color-info: oklch(0.685 0.169 237.323);
        --color-on-info: oklch(0.15 0 0);
        --color-success: oklch(0.792 0.209 151.711);
        --color-on-success: oklch(0.15 0 0);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-on-warning: oklch(0.15 0 0);
        --color-error: oklch(0.577 0.245 27.325);
        --color-on-error: oklch(1 0 0);
    }
}

To apply your custom theme to your project in your HTML, use data-theme="your-theme-name" to an HTML element.

html

<html data-theme="your-theme-name">
 ...
</html>

Themes can be nested—you can apply a specific theme to any section of your HTML, overriding the global theme for that area.

html

<html data-theme="light">
  <div data-theme="dark">
    This div uses the dark theme.
    <span data-theme="your-custom-theme">
      This span uses the your-custom-theme
    </span>
  </div>
</html>