Solid

No framework-specific package needed. The core API works directly with Solid.

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 solid from 'vite-plugin-solid'
import twcPlugin from 'typewritingclass-compiler'

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

Plugin order matters

twcPlugin() must come before solid() in the plugins array. Both plugins use Vite’s enforce: 'pre' phase, so array order determines execution order. If solid() runs first, it rewrites import paths (e.g. 'typewritingclass' → '/@fs/.../dist/index.js') before the TWC compiler can identify them, causing all tw chains to silently fall through to runtime.

src/index.tsx

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

Static styles

The compiler replaces tw chains with class name strings at build time — no runtime overhead:

import { tw } from 'typewritingclass'

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

Dynamic values

Use dcx() with a derived signal:

import { createSignal } from 'solid-js'
import { dcx, p, bg, rounded, dynamic } from 'typewritingclass'

function ColorPicker() {
  const [color, setColor] = createSignal('#3b82f6')
  const result = () => dcx(p(6), bg(dynamic(color())), rounded.lg)

  return (
    <div>
      <input type="color" value={color()} onInput={(e) => setColor(e.currentTarget.value)} />
      <div class={result().className} style={result().style}>Preview</div>
    </div>
  )
}