Styling Library Interoperability

1. Tailwind CSS Presets

To consume design system semantic custom properties in client applications, configure the provided Tailwind theme presets. This maps our custom token variables (such as --radius-lg or --bg-canvas) to standard Tailwind utilities:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import shavinPreset from "@shavin/ui/tailwind-preset";

const config: Config = {
  presets: [shavinPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@shavin/ui/**/*.{js,ts,jsx,tsx}"
  ],
};
export default config;

2. CSS Modules Interoperability

When styling modular sections (like custom panels or graphics grids), you can reference our semantic CSS variables directly in CSS Modules:

CSS Modules file

.customPanel {
  background: rgb(var(--bg-elevated));
  border: 1px solid rgb(var(--hairline));
}

Visual Parity

By consuming custom token variables directly, custom stylesheets automatically respond to runtime accent and dark-mode settings.