Installation

1. Install

pnpm

pnpm add typewritingclass
pnpm add -D typewritingclass-compiler

bun

bun add typewritingclass
bun add -D typewritingclass-compiler

npm

npm install typewritingclass
npm install -D typewritingclass-compiler

2. Add the Vite plugin

vite.config.ts

import { defineConfig } from 'vite'
import twcPlugin from 'typewritingclass-compiler'

export default defineConfig({
  plugins: [twcPlugin()],
})

The plugin handles CSS extraction and injection automatically. No manual imports needed.

For other bundlers see the esbuild plugin or Babel plugin docs. For Next.js see the Next.js integration guide.

3. Import the reset (optional)

// src/main.ts (or main.tsx, index.tsx, etc.)
import 'typewritingclass/preflight.css'

4. Style

import { tw } from 'typewritingclass'

function App() {
  return <div className={tw.p(6).bg.blue500.textColor.white.rounded.lg}>It works!</div>
}

Start your dev server. You should see a blue rounded box with white text.

Next steps

• Quick Start — build your first component
• Editor Setup — VS Code hover previews