Clampography is a typography and theming plugin for Tailwind CSS v4.
When you use Tailwind CSS, the Preflight reset removes all browser defaults. You get a completely unstyled baseline, which is great for UI, but terrible for blog articles or documentation pages because all your <h1>, <p>, <ul>, and other tags lose their styling.
Clampography solves this. It restores typography defaults and makes them mathematically perfect. It automatically generates a fluid type scale using CSS clamp() functions. Your text and spacing will scale smoothly between mobile and 4K displays - without writing a single media query.
Clampography works anywhere Tailwind CSS works. It is designed for projects using a build tool like Vite, Rollup, or Webpack, or a framework with CSS bundling like Astro, Next.js, Nuxt, Remix, or SvelteKit. With a build tool, unused modules (or styles) are automatically removed, keeping your CSS bundle small.
- 🧮 Fluid Typography & Spacing: Smooth scaling from mobile to desktop.
- 🧩 Modular: Enable only what you need.
- 🎨 Themes:
lightanddarkincluded. More themes coming soon. - 🎯 Zero Specificity: All styles use
:where()- your own CSS always wins, no!importantneeded. - 💬 TypeScript Ready: Auto-generated TypeScript types for all CSS variables.
- 🌍 RTL Ready: Works correctly in right-to-left languages out of the box.
- 🎨 Figma Design Tokens: Theme values exported as
figma-tokens.json(W3C Design Tokens). - 🖱️ Micro-interactions: Themed text selections,
<mark>highlights, and:targetanimations. - 📜 Themed Scrollbars: Automatically colorize browser scrollbars to match your active theme.
- 🖨️ Print & A11y Optimization: Removes decorations and forces readable black text.
# Install with NPM
npm install clampography
# Install with PNPM
pnpm add clampography
# Install with Bun
bun install clampography
# Install with Deno
deno install npm:clampographyThis restores typography but keeps it clean. No colors are injected.
@import "tailwindcss";
@plugin "clampography";This adds colors, styled forms, and extra decorations.
@import "tailwindcss";
@plugin "clampography" {
themes: all;
forms: true;
extra: true;
}By enabling these modules, Clampography generates semantic color utilities that automatically adapt to the current theme. You can activate a theme by setting the data-theme attribute and use the generated utility classes in your markup:
<body data-theme="dark" class="bg-clampography-background text-clampography-text">
<h1>Fluid Heading</h1>
<button class="bg-clampography-primary">Action</button>
</body>Clampography is highly modular. You can configure it directly in your CSS:
@plugin "clampography" {
/* Feature Modules */
base: true | false; /* (default: true) */
themes: "light, dark" | "all" | false; /* (default: false) */
extra: true | false; /* (default: false) */
forms: true | false; /* (default: false) */
kbd: true | false; /* (default: false) */
print: true | false; /* (default: false) */
scrollbar: true | false; /* (default: false) */
highlights: true | false; /* (default: false) */
/* Advanced Settings */
typography: "global" | ".your-class"; /* Scope isolation */
fluid-min: "320px"; /* Mobile breakpoint */
fluid-max: "1280px"; /* Desktop breakpoint */
}- 📖 Complete Usage Guide
- 🔄 Configuration Flow Diagram
- 💻 Developer Server (Theme Editor)
- 🤝 Contributing
Clampography targets modern browsers to keep the CSS output clean, small, and mathematically precise without relying on heavy polyfills or fallbacks.
- Minimum requirement: ~94% global support. All modules depend on :where() and :is() selectors - without them, styles will not apply at all.
- Optimal (Themes & Forms): ~93% global support (additionally requires oklch() and color-mix()).
- Container Query scaling (
scale-mode: container): ~92% global support (additionally requires cqi units).
- daisyUI created by Pouya Saadeghi
- The official Typography plugin for Tailwind CSS: tailwindcss-typography
License: MIT