Additional utility classes for special effects, joins, typography, and layout enhancements that extend Tailwind CSS functionality.
Glass morphism effect for creating frosted glass appearance.
<!-- Basic glass effect -->
<div class="glass w-64 h-32 p-6">
<p>Glass morphism effect</p>
</div>
<!-- Glass effect with content -->
<div class="hero min-h-screen" style="background-image: url(https://daisyui.com/images/stock/photo-1507003211169-0a1dd7228f2d.jpg);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<div class="glass p-6 rounded-box">
<h1 class="mb-5 text-5xl font-bold">Hello there</h1>
<p class="mb-5">This is a glass morphism card</p>
<button class="btn btn-primary">Get Started</button>
</div>
</div>
</div>
</div>
<!-- Glass card -->
<div class="card glass w-96">
<figure><img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" /></figure>
<div class="card-body">
<h2 class="card-title">Glass Card</h2>
<p>This card has a glass effect</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
</div>Utility for visually joining elements together.
<!-- Join buttons -->
<div class="join">
<button class="btn join-item">1</button>
<button class="btn join-item">2</button>
<button class="btn join-item">3</button>
</div>
<!-- Join inputs -->
<div class="join">
<input class="input input-bordered join-item" placeholder="Email"/>
<button class="btn btn-primary join-item">Subscribe</button>
</div>
<!-- Vertical join -->
<div class="join join-vertical">
<button class="btn join-item">Top</button>
<button class="btn join-item">Middle</button>
<button class="btn join-item">Bottom</button>
</div>Border radius utilities with theme integration.
<!-- Border radius utilities -->
<div class="bg-primary text-primary-content p-4 rounded-selector">
Using theme selector radius
</div>
<div class="bg-secondary text-secondary-content p-4 rounded-field">
Using theme field radius
</div>
<div class="bg-accent text-accent-content p-4 rounded-box">
Using theme box radius
</div>
<!-- Custom radius values -->
<div class="bg-info text-info-content p-4" style="border-radius: var(--radius-selector);">
Using CSS custom property
</div>Typography enhancements and utilities.
<!-- Typography utilities -->
<article class="prose">
<h1>Typography Example</h1>
<p>This paragraph uses DaisyUI typography utilities.</p>
<blockquote>This is a blockquote with proper styling.</blockquote>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
</article>
<!-- Typography sizes -->
<article class="prose prose-sm">
<h1>Small Typography</h1>
<p>Smaller text for compact layouts.</p>
</article>
<article class="prose prose-lg">
<h1>Large Typography</h1>
<p>Larger text for better readability.</p>
</article>
<article class="prose prose-xl">
<h1>Extra Large Typography</h1>
<p>Extra large text for headers and hero sections.</p>
</article>
<!-- Typography with theme colors -->
<article class="prose prose-primary">
<h1>Primary Typography</h1>
<p>Typography with primary theme colors.</p>
</article>
<article class="prose prose-secondary">
<h1>Secondary Typography</h1>
<p>Typography with secondary theme colors.</p>
</article>Image and element masking utilities.
<!-- Basic masks -->
<div class="mask mask-star w-12 h-12 bg-primary"></div>
<div class="mask mask-heart w-12 h-12 bg-red-400"></div>
<div class="mask mask-hexagon w-12 h-12 bg-primary"></div>
<div class="mask mask-circle w-12 h-12 bg-primary"></div>
<div class="mask mask-triangle w-12 h-12 bg-primary"></div>
<!-- Mask shapes -->
<div class="mask mask-squircle w-12 h-12 bg-primary"></div>
<div class="mask mask-decagon w-12 h-12 bg-primary"></div>
<div class="mask mask-pentagon w-12 h-12 bg-primary"></div>
<div class="mask mask-diamond w-12 h-12 bg-primary"></div>
<div class="mask mask-square w-12 h-12 bg-primary"></div>
<!-- Masks with images -->
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-star w-20 h-20" />
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-heart w-20 h-20" />
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-hexagon w-20 h-20" />
<!-- Half masks -->
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-half-1 w-20 h-20" />
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-half-2 w-20 h-20" />Utility for swapping between two states or icons.
<!-- Basic swap -->
<label class="swap">
<input type="checkbox" />
<div class="swap-on">ON</div>
<div class="swap-off">OFF</div>
</label>
<!-- Swap with icons -->
<label class="swap">
<input type="checkbox" />
<div class="swap-on fill-current">
<svg class="w-8 h-8" viewBox="0 0 24 24">
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
</svg>
</div>
<div class="swap-off fill-current">
<svg class="w-8 h-8" viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
</svg>
</div>
</label>
<!-- Swap with rotate -->
<label class="swap swap-rotate">
<input type="checkbox" />
<svg class="swap-on w-8 h-8 fill-current" viewBox="0 0 24 24">
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
</svg>
<svg class="swap-off w-8 h-8 fill-current" viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
</svg>
</label>
<!-- Swap with flip -->
<label class="swap swap-flip">
<input type="checkbox" />
<div class="swap-on">π</div>
<div class="swap-off">π</div>
</label>Utility classes for styling links.
<!-- Basic links -->
<a class="link">I'm a simple link</a>
<a class="link link-primary">I'm a primary link</a>
<a class="link link-secondary">I'm a secondary link</a>
<a class="link link-accent">I'm an accent link</a>
<!-- Link variants -->
<a class="link link-neutral">Neutral link</a>
<a class="link link-info">Info link</a>
<a class="link link-success">Success link</a>
<a class="link link-warning">Warning link</a>
<a class="link link-error">Error link</a>
<!-- Link states -->
<a class="link link-hover">Link with hover effect</a>
<p>You can use link class on <a class="link">any text</a> inside a paragraph.</p>Utility for displaying keyboard keys.
<!-- Basic keyboard keys -->
<kbd class="kbd">ctrl</kbd>
<kbd class="kbd">+</kbd>
<kbd class="kbd">shift</kbd>
<kbd class="kbd">+</kbd>
<kbd class="kbd">del</kbd>
<!-- Keyboard key sizes -->
<kbd class="kbd kbd-lg">shift</kbd>
<kbd class="kbd">shift</kbd>
<kbd class="kbd kbd-sm">shift</kbd>
<kbd class="kbd kbd-xs">shift</kbd>
<!-- In context -->
<p>Press <kbd class="kbd">F</kbd> to pay respects.</p>
<p>To select all, press <kbd class="kbd">ctrl</kbd> + <kbd class="kbd">A</kbd></p>
<p>To copy, press <kbd class="kbd">β</kbd> + <kbd class="kbd">C</kbd> on Mac</p>Usage Examples:
<!-- Combining utilities -->
<div class="card glass w-96">
<div class="card-body">
<h2 class="card-title">Glass Card with Utilities</h2>
<div class="badge badge-primary">New</div>
<p>This card combines multiple DaisyUI utilities:</p>
<ul class="list-disc list-inside">
<li>Glass morphism effect</li>
<li>Card component</li>
<li>Badge utility</li>
</ul>
<div class="card-actions justify-end">
<label class="swap">
<input type="checkbox" />
<div class="swap-on">β€οΈ</div>
<div class="swap-off">π€</div>
</label>
</div>
</div>
</div>
<!-- Utility composition -->
<div class="join">
<input class="input input-bordered join-item" placeholder="Search..." />
<button class="btn btn-primary join-item">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
<path d="M21,6.41L17.59,3L12,8.59L6.41,3L3,6.41L8.59,12L3,17.59L6.41,21L12,15.41L17.59,21L21,17.59L15.41,12L21,6.41Z"/>
</svg>
</button>
</div>// Glass effect utility
interface GlassClasses {
"glass": string;
}
// Mask utility types
type MaskShape =
| "mask-star" | "mask-heart" | "mask-hexagon" | "mask-circle"
| "mask-triangle" | "mask-squircle" | "mask-decagon"
| "mask-pentagon" | "mask-diamond" | "mask-square"
| "mask-half-1" | "mask-half-2";
interface MaskClasses {
"mask": string;
[key: MaskShape]: string;
}
// Swap utility types
type SwapVariant = "swap-rotate" | "swap-flip";
interface SwapClasses {
"swap": string;
"swap-on": string;
"swap-off": string;
"swap-rotate": string;
"swap-flip": string;
}
// Link utility types
type LinkColor =
| "link-primary" | "link-secondary" | "link-accent"
| "link-neutral" | "link-info" | "link-success"
| "link-warning" | "link-error";
type LinkVariant = "link-hover";
interface LinkClasses {
"link": string;
[key: LinkColor]: string;
"link-hover": string;
}
// KBD utility types
type KbdSize = "kbd-lg" | "kbd-sm" | "kbd-xs";
interface KbdClasses {
"kbd": string;
[key: KbdSize]: string;
}
// Typography utility types
type ProseSize = "prose-sm" | "prose-lg" | "prose-xl" | "prose-2xl";
type ProseColor = "prose-primary" | "prose-secondary" | "prose-accent";
interface TypographyClasses {
"prose": string;
[key: ProseSize]: string;
[key: ProseColor]: string;
}
// Radius utility types (CSS custom properties)
interface RadiusProperties {
"--radius-selector": string;
"--radius-field": string;
"--radius-box": string;
}