Pure Tailwind CSS v4
v4.0 No component library. Just utility classes and the @theme system.
Every element on this page is built with plain HTML and Tailwind utility classes. Zero abstractions, zero dependencies.
Color Palette
The primary theme scale and accent colors.
Zinc Primary
Accent Colors
Buttons
Pure button elements styled with utility classes. Variants, sizes, and states.
Variants
Sizes
States
Form Controls
Native HTML form elements styled entirely with Tailwind utilities.
Value: 50
Cards
Content containers with various layouts and styles.
Card Title
Card description text goes here with some supporting details.
Notifications
You have 3 unread messages.
New comment on your post
Someone mentioned you
Subscription renewed
Total Revenue
$45,231.89
+20.1% from last month
Anand Davaasuren
ananddavaasuren@email.com
Alerts
Notification banners with semantic color coding.
Success
Your changes have been saved successfully.
Warning
Your trial expires in 3 days. Upgrade to keep access.
Error
Something went wrong. Please try again later.
Info
A new software update is available for download.
Tabs
Navigation tabs with active state indicator.
Manage your account settings and preferences. Update your display name, email, and profile picture.
Table
Data table with dividers and hover states.
| Name | Status | Role | Amount |
|---|---|---|---|
| Lindsay Walton | Active | Developer | $3,200.00 |
| Courtney Henry | Active | Designer | $2,800.00 |
| Tom Cook | Pending | Manager | $4,100.00 |
| Whitney Francis | Inactive | Analyst | $1,900.00 |
| Leonard Krasner | Active | Engineer | $3,600.00 |
Badges
Small status indicators and labels with semantic colors.
Dark Mode
Demonstrating the dark: variant with a toggle to preview both modes.
Adaptive Component
This card switches between light and dark styling using Tailwind's color utilities.
<!-- Light by default, dark variant overrides -->
<div class="bg-white dark:bg-zinc-950
text-zinc-900 dark:text-zinc-100
border-zinc-200 dark:border-zinc-800">
<p class="text-zinc-600 dark:text-zinc-400">
Adapts to the user's color scheme preference.
</p>
</div>@theme Configuration
Tailwind v4 replaces tailwind.config.js with CSS-native @theme blocks.
The active theme's CSS custom properties — these are swapped dynamically via JavaScript when you pick a theme above.
@import "tailwindcss";
/* Active Theme: Zinc */
:root {
--theme-primary: var(--color-zinc-500);
--theme-surface: var(--color-zinc-900);
--theme-text: var(--color-zinc-100);
--theme-accent: var(--color-emerald-500);
}How this page's theming works:
- CSS custom properties (
--theme-*) defined on:root - Tailwind utilities reference them:
bg-[var(--theme-surface)] - JavaScript swaps the CSS var values when theme changes
- 49 themes across 6 categories — Tailwind scales + community favorites
- Theme choice persists in
localStorage