React

Setup

bun

bun add typewritingclass typewritingclass-react
bun add -d typewritingclass-compiler

pnpm

pnpm add typewritingclass typewritingclass-react
pnpm add -D typewritingclass-compiler

npm

npm install typewritingclass typewritingclass-react
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 'virtual:twc.css'

Static styles

import { tw } from 'typewritingclass'

function Card({ children }: { children: React.ReactNode }) {
  return <div className={tw.p(6).bg('blue-500').textColor('white').rounded('lg').hover.bg('blue-600')}>{children}</div>
}

Dynamic values with 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.