Tailwind reference

Setup

Install Tailwind CSS 4.3 or later, before Tailwind 5, and its Vite plugin in the application that consumes Tinyrack.

pnpm add -D tailwindcss@^4.3.0 @tailwindcss/vite@^4.3.0

Add the plugin to the application's Vite configuration.

import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Import Tailwind first, then Tinyrack core CSS. Import each component stylesheet separately when the component is used.

@import "tailwindcss";
@import "@tinyrack/ui/core.css";
@import "@tinyrack/ui/components/card.css";

Choose a value

1. Choose a named tinyrack-* utility when the value represents a design-system decision such as color, type, spacing, radius, elevation, or motion.
2. Choose a Tailwind default for incidental layout, such as grid or grid-cols-2. Use sm:, md:, and lg: for Tinyrack's viewport thresholds.
3. Choose an arbitrary value only when a real component variable or one-off CSS value has no named utility. Do not create a second token vocabulary.

Practical example

This card uses named Tinyrack utilities for system decisions and Tailwind defaults for its layout. The example is ready to paste after the setup above.

export function ClusterHealth() {
  return (
    <section className="grid gap-tinyrack-lg rounded-tinyrack-lg border-tinyrack-default border-tinyrack-border bg-tinyrack-surface p-tinyrack-xl md:grid-cols-2">
      <h2 className="text-tinyrack-xl font-tinyrack-heading">Cluster health</h2>
      <p className="text-tinyrack-sm text-tinyrack-text-muted">
        All nodes are available.
      </p>
    </section>
  );
}

Arbitrary values

Use an arbitrary custom-property override when a public component variable has no named Tailwind utility. Keep the semantic token as the source of truth instead of copying its resolved value. For example, Card consumes --tr-card-background as an override hook.

import { TRCard } from '@tinyrack/ui/components/card';

<TRCard.Root className="[--tr-card-background:var(--tinyrack-surface-muted)]">
  ...
</TRCard.Root>

Reference

Search the mappings read from the @theme static block in Tinyrack's source core.css. Each group links to its conceptual Foundation guide. On narrow screens, each table scrolls horizontally without widening the page.