@takuhii/bricks-tailwind

Tailwind CSS v4 theme preset backed by @takuhii/bricks-tokens design tokens.

Installation

pnpm add @takuhii/bricks-tailwind @takuhii/bricks-tokens tailwindcss

Usage

In your app's main CSS file:

@import "tailwindcss";
@import "@takuhii/bricks-tailwind/css";
@import "@takuhii/bricks-tokens/css";

That's it. You now have utility classes backed by Bricks design tokens:

<div class="bg-primary text-neutral-600 p-4 rounded-md shadow-lg">
  <h1 class="font-heading text-2xl font-bold">Hello</h1>
  <p class="text-text-muted text-sm leading-relaxed">Content here</p>
</div>

Available Utilities

| Category | Example Classes | |----------|----------------| | Colors | bg-primary, text-error, border-border, bg-gray-100 | | Spacing | p-1 through p-8, m-4, gap-3 | | Border Radius | rounded-sm, rounded-md, rounded-lg, rounded-full | | Shadows | shadow-sm, shadow-base, shadow-lg, shadow-modal | | Typography | font-heading, font-body, text-xs through text-5xl | | Font Weight | font-normal, font-medium, font-semibold, font-bold | | Line Height | leading-tight, leading-normal, leading-relaxed | | Z-Index | z-modal, z-dropdown, z-tooltip, z-popover | | Transitions | transition-fast, transition-base, transition-slow | | Breakpoints | sm:, md:, lg:, xl: responsive prefixes |

Brand Theming

Brand-swappable tokens (primary colors, fonts) automatically respond to theme overrides. Set the brand CSS variables at a higher scope to switch themes:

/* Custom theme override */
.theme-custom {
  --brand-primary: #51af36;
  --brand-primary-dark: #3d8a29;
  --font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

All bg-primary, text-primary-hover, etc. utilities will reflect the new brand.

How It Works

This package provides a single theme.css file that maps Bricks token CSS custom properties into Tailwind v4's @theme block. No JavaScript config needed — Tailwind v4 reads theme values directly from CSS.

The token values themselves come from @takuhii/bricks-tokens/css (the :root custom properties). This preset just tells Tailwind which of those properties to use for which utility category.