Installation

1. Install the packages

bun

bun add typewritingclass
bun add -d typewritingclass-compiler

pnpm

pnpm add typewritingclass
pnpm 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()],
})

For esbuild or Babel, see esbuild or Babel.

3. Import the generated CSS

src/main.tsx

import 'virtual:twc.css'

4. Verify

import { tw } from 'typewritingclass'

function App() {
  return <div className={tw.p(6).bg('blue-500').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