Tailwind CSS v4 Components
Components built natively for Tailwind v4 — CSS-first config, no tailwind.config.ts, oklch colors, zero runtime.
@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";
@variant dark (&:is(.dark *));Key features
Built for Tailwind CSS v4 — not v3 with v4 compatibility
CSS-first configuration — no tailwind.config.ts needed
oklch colors via CSS custom properties
Dark mode via .dark class — no JS toggle
All utilities and variants available in component classes
Zero runtime — styles are static CSS, not computed JS
Native Tailwind v4, not a compatibility layer
Ninna UI was designed for Tailwind CSS v4 from the start. There's no tailwind.config.ts to maintain, no content paths to configure, no plugin array to manage. You import Tailwind and the theme preset — that's it.
Tailwind v4's CSS-first model means all configuration lives in CSS. Theme tokens are CSS custom properties, dark mode is a CSS variant, and component styles are utility classes compiled by Tailwind's build step.
Setup in 3 lines
Add these three lines to your main CSS file and you're done:
@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";
@variant dark (&:is(.dark *));