@quanticjs/tailwind-preset
v0.2.0
Published
Shared Tailwind CSS v4 theme for QuanticJS — design tokens, color palette, typography, light/dark mode
Downloads
271
Readme
@quanticjs/tailwind-preset
Shared Tailwind CSS v4 theme for QuanticJS apps. Ships design tokens for colors, typography, border radius, and dark mode as a single CSS import.
Install
pnpm add @quanticjs/tailwind-presetPeer dependency: tailwindcss >=4.0.0.
Usage
Replace your hand-written @theme block with one import:
@import "tailwindcss";
@import "@quanticjs/tailwind-preset/theme.css";That's it. All Tailwind utility classes (bg-primary, text-muted-foreground, border-border, etc.) work immediately with consistent values across every project.
What's Included
Colors (Light + Dark)
Every semantic color slot that shadcn/ui components expect:
| Token | Light | Dark |
|---|---|---|
| background / foreground | White / near-black | Near-black / near-white |
| primary / primary-foreground | Blue 220° | Blue 217° |
| secondary | Light gray | Dark gray |
| muted | Light gray | Dark gray |
| accent | Light gray | Dark gray |
| destructive | Red | Dark red |
| success | Green | Dark green |
| warning | Amber | Dark amber |
| border / input / ring | Light border | Dark border |
| sidebar-* | Full sidebar palette | Full sidebar palette |
| chart-1 through chart-5 | 5-color chart palette | 5-color chart palette |
Border Radius
--radius: 0.625rem (10px)
--radius-lg: var(--radius)
--radius-md: calc(var(--radius) - 2px)
--radius-sm: calc(var(--radius) - 4px)Typography
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif
--font-mono: 'JetBrains Mono', ui-monospace, monospaceBase Styles
* { border-color: theme(colors.border); }
body { background: theme(colors.background); color: theme(colors.foreground); }Dark Mode
Uses class strategy via @custom-variant dark (&:is(.dark *)). Add class="dark" to <html> to activate.
Overriding Tokens
Override specific tokens in your project CSS after the import:
@import "tailwindcss";
@import "@quanticjs/tailwind-preset/theme.css";
/* Project-specific brand color */
:root {
--primary: 262 83% 58%;
--ring: 262 83% 58%;
}
.dark {
--primary: 262 83% 68%;
--ring: 262 83% 68%;
}Override as few or as many tokens as needed. Unspecified tokens keep the preset defaults.
JS Token Access
For programmatic use (charts, canvas, dynamic styles), import the raw HSL values:
import { light, dark, radius } from '@quanticjs/tailwind-preset';
light.primary; // '220 70% 51%'
dark.primary; // '217 91% 60%'
radius; // '0.625rem'The SemanticToken type provides autocompletion for all token names.
Exports
// CSS (main deliverable)
import "@quanticjs/tailwind-preset/theme.css"
// JS (programmatic access)
light: Record<SemanticToken, string>
dark: Record<SemanticToken, string>
radius: string
type SemanticToken