5d2b245f5a
- README: add all 6 packages, React/Tailwind usage sections, remove glows refs - CLAUDE.md: rewrite for 6 packages, 4-layer parity, build.cjs, storefront migration as implemented reference - Package READMEs: fix monorepo links, remove glows references Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dangerousthings/tailwind-preset
Tailwind CSS v3 preset that maps Dangerous Things design tokens to Tailwind theme values. Uses CSS custom property references so the same utility classes work across both DT and Classic brands at runtime.
Install
npm install @dangerousthings/tailwind-preset
Peer Dependencies
npm install tailwindcss@^3.4
You also need a brand token CSS file loaded (from @dangerousthings/web or @dangerousthings/tokens).
Setup
Add the preset to your tailwind.config.js:
import dtPreset from "@dangerousthings/tailwind-preset";
export default {
presets: [dtPreset],
content: ["./src/**/*.{tsx,ts,html}"],
};
Available Utilities
Colors
All DT design token colors are available under the dt- prefix. Colors with -rgb variants support Tailwind opacity modifiers.
<div class="bg-dt-bg text-dt-text-primary">
<h1 class="text-dt-primary">Heading</h1>
<p class="text-dt-text-secondary">Body text</p>
<button class="bg-dt-primary/50 text-dt-bg">50% opacity</button>
</div>
| Utility | Token |
|---|---|
bg-dt-bg, text-dt-bg |
--color-bg |
bg-dt-surface |
--color-surface |
bg-dt-primary, text-dt-primary |
--color-primary |
bg-dt-secondary |
--color-secondary |
bg-dt-accent |
--color-accent |
bg-dt-error |
--color-error |
text-dt-text-primary |
--color-text-primary |
text-dt-text-secondary |
--color-text-secondary |
text-dt-text-muted |
--color-text-muted |
Mode Colors
Card mode colors are available under the mode- prefix:
<div class="border-mode-normal">Normal</div>
<div class="text-mode-emphasis">Emphasis</div>
<div class="bg-mode-warning">Warning</div>
Spacing
<div class="p-dt-4 gap-dt-2 m-dt-1">...</div>
| Utility | Token |
|---|---|
*-dt-1 through *-dt-8 |
--space-1 through --space-8 |
Border Radius
<div class="rounded-dt">Default</div>
<div class="rounded-dt-sm">Small</div>
<div class="rounded-dt-lg">Large</div>
Font Family
<h1 class="font-dt-heading">Tektur heading</h1>
<p class="font-dt-body">Body text</p>
<code class="font-dt-mono">Monospace</code>
Brand Switching
Because the preset uses var() references, switching brands at runtime requires only changing the CSS custom properties (e.g., via data-brand attribute). No Tailwind rebuild is needed.
<div data-brand="dt">Cyan neon theme</div>
<div data-brand="classic">Navy magenta theme</div>
Monorepo
Part of the DT Design System monorepo.