Docs

Tailwind Setup

Mridha UI uses Tailwind CSS v4 with the @theme directive for a CSS-native token system. No separate config file required.

Install Tailwind v4

pnpm add tailwindcss @tailwindcss/postcss postcss

PostCSS config

postcss.config.mjs

const config = {
  plugins: { "@tailwindcss/postcss": {} },
};
export default config;

Design tokens

Add the Mridha UI token set to your globals.css:

globals.css

@import "tailwindcss";

@theme {
  --color-bg:           #0d0d0f;
  --color-bg-elevated:  #17171c;
  --color-surface:      #16161a;
  --color-fg:           #f0f0f4;
  --color-fg-secondary: #a1a1b5;
  --color-fg-muted:     #5a5a72;
  --color-accent:       #3ecf8e;
  --color-accent-dim:   #2a9e6a;
  --color-border:       #252530;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}