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.
Note
Clampography is designed for projects using a build tool like Vite or Webpack, or a framework with CSS bundling like Astro, Next.js, Remix, or SvelteKit. With a build tool, unused modules are automatically removed, keeping your CSS bundle small. A build tool is not required - CDN files are also available. However, CDN files cannot be tree-shaken, resulting in a significantly larger CSS file.
- 🧮 Fluid Typography & Spacing: Smooth scaling from mobile to desktop.
- 🎨 Built-in Themes:
lightanddarkincluded. More themes coming soon. - 🧩 Modular: Enable only what you need.
- 🎯 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;
}<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 */
themes: "light, dark" | "all" | false; /* (default: false) */
base: true | false; /* (default: true) */
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 */
}Clampography targets modern browsers to keep the CSS output clean, small, and mathematically precise without relying on heavy polyfills or fallbacks.
- Basic (Typography Only): ~97% global support (requires clamp()).
- Optimal (Themes & Forms): ~93% global support (requires oklch() and color-mix()).
- daisyUI created by Pouya Saadeghi
- The official Typography plugin for Tailwind CSS: tailwindcss-typography
License: MIT
