Why Ninna UI is the most Tailwind-native component library
Tailwind CSS v4 brought a fundamental shift: CSS-first configuration. No more tailwind.config.ts — theme tokens live in CSS via the @theme directive. Ninna UI was built from the ground up for this model. Every theme preset is a CSS file with oklch custom properties, and every component uses Tailwind utility classes.
Unlike libraries that bolt Tailwind onto an existing theming system, Ninna UI's theming IS Tailwind v4. The oklch color tokens map directly to Tailwind's color utilities (bg-primary, text-success, border-warning, etc.), so you use the same Tailwind classes you already know.
CSS setup — that's all
@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";
@variant dark (&:is(.dark *));No config file. No plugin registration. No JavaScript provider. Just two CSS imports.
5 theme presets with oklch colors
default
Purple/Magenta — vibrant and electric
ocean
Blue/Cyan — cool and professional
sunset
Orange/Rose — warm and bold
forest
Green/Amber — natural and earthy
minimal
Monochrome — clean and understated
data-slot CSS targets for deep customization
Ninna UI exposes 98 data-slot attributes on component internals. Target any element with plain CSS — no !important, no source forks:
/* Make all buttons pill-shaped */
[data-slot="button"] {
border-radius: 9999px;
}
/* Or via Tailwind utility on a specific instance */
<Button className="data-[slot=button]:rounded-full">
Rounded
</Button>FAQ
Is Ninna UI a Tailwind CSS component library?
Yes. Ninna UI is built natively for Tailwind CSS v4.1. All components use Tailwind utility classes, and theming is done through CSS custom properties (oklch colors) that integrate with Tailwind v4's @theme directive. There is no tailwind.config.ts — everything is CSS-first.
Does Ninna UI work with Tailwind CSS v3?
No. Ninna UI is built specifically for Tailwind CSS v4.1, which introduced CSS-first configuration, the @theme directive, and oklch color support. If you are on Tailwind v3, upgrade to v4 first.
Do I need to configure tailwind.config.ts for Ninna UI?
No. Tailwind CSS v4 is CSS-first — there is no config file. You simply import the theme preset CSS file alongside Tailwind: @import "tailwindcss"; @import "@ninna-ui/core/theme/presets/default.css";.
How does Ninna UI handle Tailwind class safelisting for npm packages?
Ninna UI uses an automated safelist generator that scans all component source files and writes @source inline() directives into the theme CSS. This ensures all Tailwind classes used by components are included in your build when installed from npm, since Tailwind v4 skips node_modules by default.
Can I use Tailwind utility classes to customize Ninna UI components?
Yes. Pass any Tailwind class via the className prop. For deeper customization, use data-slot CSS targets: [data-slot="button"] { border-radius: 9999px; } styles the button's internal element without !important or source edits.