Vanilla JS

Setup

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

vite.config.ts

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

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

src/main.ts

import 'virtual:twc.css'

Static styles

import { tw } from 'typewritingclass'

const card = document.createElement('div')
card.className = tw.p(6).bg('blue-500').textColor('white').rounded('lg')
card.textContent = 'Hello from typewritingclass!'
document.body.appendChild(card)

Dynamic values

import { dcx, p, bg, rounded, dynamic } from 'typewritingclass'

function createSwatch(color: string): HTMLElement {
  const el = document.createElement('div')
  const { className, style } = dcx(p(6), bg(dynamic(color)), rounded('lg'))
  el.className = className
  Object.assign(el.style, style)
  return el
}

Update dynamic values directly via CSS custom properties:

el.style.setProperty('--twc-d0', '#ef4444')

Runtime injection

For development without a compiler, import the runtime injector:

import 'typewritingclass/inject'