Tailwind CSS v4 Typography System

A modern typography system for Tailwind CSS v4 using the @utility directive for first-class utility support.

🏗️ Project Structure

This is an npm workspace monorepo containing:

dual-typography-system/
├── apps/
│   └── angular-demo/        # Angular 20 demo application
├── packages/
│   └── typography/          # Typography library package
├── package.json             # Workspace root
└── README.md

🚀 Quick Start

Installation

# Install all dependencies
npm install

# Run the Angular demo
npm run dev

Development Commands

# Start Angular dev server
npm run dev

# Build all packages
npm run build

# Run tests (if available)
npm test

📦 Packages

@workspace/typography

The core typography package providing Tailwind CSS v4 utilities and wrapper classes.

Installation in your project:

npm install @workspace/typography

Usage:

@import "tailwindcss";
@import "@workspace/typography";

See packages/typography/README.md for detailed documentation.

🎨 Features

Dual Usage Pattern

1. Controlled Typography - Apply utilities directly to elements

   <h1 class="typography-h1">Welcome</h1>
   <p class="typography-p">Beautiful paragraph.</p>

2. Uncontrolled Typography - Wrap CMS/markdown content

   <article class="typography">
     <h1>Title from CMS</h1>
     <p>Content from CMS</p>
   </article>

Key Benefits

• ✅ Native Tailwind Support - Works with ALL variants (hover, dark, responsive, etc.)
• ✅ Fluid Typography - Uses CSS clamp() for responsive scaling
• ✅ Zero Redundancy - Define once with @utility, reuse everywhere
• ✅ Composable - Mix freely with other Tailwind utilities
• ✅ JIT Compatible - Only generates used utilities

🧪 Demo Application

The Angular demo (apps/angular-demo) showcases:

• All typography utilities (h1-h6, body text, links, code, etc.)
• Wrapper classes for uncontrolled content
• Dark mode variant (typography-invert)
• Responsive variants
• Integration with Tailwind CSS v4

Visit the demo to see live examples and interactive documentation.

📚 Documentation

• Typography Package Documentation
• Original Design Documentation
• CLAUDE.md - Developer guidance

🛠️ Tech Stack

• Tailwind CSS v4 - Latest version with @utility directive support
• Angular 20 - Modern Angular with standalone components
• npm workspaces - Monorepo management
• Vite - Fast build tool (via Angular CLI)

📝 Available Typography Utilities

Headings: typography-h1 through typography-h6 Body: typography-p, typography-lead, typography-small, typography-xs Inline: typography-link, typography-strong, typography-em, typography-code Blocks: typography-pre, typography-blockquote, typography-ul, typography-ol, typography-li Media: typography-img, typography-figure, typography-figcaption Tables: typography-table, typography-thead, typography-th, typography-tr, typography-td Other: typography-hr

Wrapper Classes: typography, typography-sm, typography-lg, typography-invert, typography-no-max

🤝 Contributing

This is a demonstration project showcasing the dual typography pattern with Tailwind v4.

📄 License

MIT