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
css
@layer theme {
:is([data-theme="your-theme-name"], [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>