Vanilla JS

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 twcPlugin from 'typewritingclass-compiler'

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

src/main.ts

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

Static styles

import { tw } from 'typewritingclass'

const card = document.createElement('div')
card.className = tw
  .p(6)
  .bg.blue500
  .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')