React

Setup

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

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import twcPlugin from 'typewritingclass-compiler'

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

src/main.tsx

import 'typewritingclass/preflight.css' // optional CSS reset

Static styles

The compiler replaces tw chains with class name strings at build time:

import { tw } from 'typewritingclass'

function Card({ children }: { children: React.ReactNode }) {
  return <div className={tw.p(6).bg.blue500.textColor.white.rounded.lg.hover(tw.bg.blue600)}>{children}</div>
}

Dynamic values with useStyle()

For runtime values, add typewritingclass-react and use useStyle():

import { useStyle } from 'typewritingclass-react'
import { p, bg, rounded, dynamic } from 'typewritingclass'

function Banner({ color }: { color: string }) {
  const props = useStyle(p(6), bg(dynamic(color)), rounded.lg)
  return <div {...props}>Welcome!</div>
}

For Next.js, see the dedicated Next.js integration guide.