Tailwind CSS

Use VhyxUI with Tailwind v3 or v4. Utilities override component styles without !important, and your utilities can use VhyxUI tokens: bg-accent, text-foreground-subtle, rounded-md, shadow-lg.

StylingNew

How it works

VhyxUI component styles live in the CSS cascade layer components, and the token reset lives in base. Tailwind utilities live in utilities, which always wins — so className="px-8 rounded-full" on a Button just works. Dark mode follows data-theme="dark", the .dark class, or the OS with data-theme="system".

Tailwind v4

bash

pnpm add @vhyxui/react @vhyxui/tokens @vhyxui/tailwind

app.css

@import "tailwindcss";
@import "@vhyxui/tailwind/theme.css";   /* bg-accent, text-foreground, rounded-md … */
@import "@vhyxui/tokens/tokens.css";    /* variables only — Tailwind's preflight is your reset */
@import "@vhyxui/react/style.css";      /* components, in @layer components */

Tailwind v3

tailwind.config.js

module.exports = {
  presets: [require('@vhyxui/tailwind')],
  content: ['./src/**/*.{ts,tsx}'],
};

globals.css

@import "@vhyxui/tokens/index.css";   /* tokens + layered reset */
@import "@vhyxui/react/style.css";
@tailwind components;
@tailwind utilities;

The preset disables Tailwind v3's preflight: v3 emits it unlayered, which would override component styles. VhyxUI's reset replaces it.

Overriding components

tsx

import { Button, Card, cx } from '@vhyxui/react';

<Button className="rounded-full px-8 shadow-lg">Launch</Button>
<Card className={cx('p-8', isActive && 'ring-2 ring-accent')}>…</Card>

Token utilities

html

<div class="bg-surface text-foreground border border-border rounded-lg shadow-md p-6">
  <p class="text-foreground-subtle">Follows the active theme automatically</p>
  <span class="bg-success-subtle text-success-foreground">Healthy</span>
</div>