Solid

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

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

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

src/index.tsx

import 'virtual:twc.css'

Static styles

import { tw } from 'typewritingclass'

function Card(props: { children: any }) {
  return <div class={tw.p(6).bg('blue-500').textColor('white').rounded('lg').hover.bg('blue-600')}>{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>
  )
}