Next.js

Setup

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

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

npm install typewritingclass typewritingclass-react typewritingclass-next
npm install -D typewritingclass-compiler

Next.js config

Wrap your config with withTwc to enable build-time CSS extraction:

import { withTwc } from 'typewritingclass-next/plugin'

/** @type {import('next').NextConfig} */
const nextConfig = {}

export default withTwc(nextConfig)

Options:

Option	Type	Default	Description
`outputFile`	`string`	`".next/twc.css"`	Path for extracted CSS
`strict`	`boolean`	`false`	Error on non-static `cx()` args

Root layout

Add <TWCStyles /> in <head> for SSR styles:

import 'typewritingclass/preflight.css'
import { TWCStyles } from 'typewritingclass-next'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <TWCStyles />
      </head>
      <body>{children}</body>
    </html>
  )
}

Server Components

Use tw directly — no hooks, no client boundary. The compiler replaces tw chains with class name strings at build time:

import { tw } from 'typewritingclass'

export default function Home() {
  return (
    <div className={tw.flex.flexCol.gap(8).p(8).items.center}>
      <h1 className={tw.text._2xl.font.bold.textColor.slate900}>
        Hello from Next.js
      </h1>
      <div className={tw.p(6).bg.white.rounded.lg.shadow.md.hover(tw.shadow.lg)}>
        Hover this card
      </div>
    </div>
  )
}

## Client Components

For static styles, `tw` works the same with `'use client'`. For dynamic values, use `useStyle()`:

```tsx
'use client'

import { useStyle } from 'typewritingclass-react'
import { p, bg, rounded, dynamic } from 'typewritingclass'

export function Banner({ color }: { color: string }) {
  const props = useStyle(p(6), bg(dynamic(color)), rounded('lg'))
  return <div {...props}>Welcome!</div>
}