Default Tokens

Typewriting Class ships with Tailwind CSS-compatible design tokens. Most utilities accept Tailwind-style string lookups directly (tw.bg('blue-500')), so you often do not need to import tokens at all.

Colors

22 color palettes with shades 50-950, plus white, black, transparent, currentColor.

// String lookups (preferred)
tw.bg('blue-500')
tw.textColor('slate-900')

// Or import tokens directly
import { blue, slate } from 'typewritingclass/theme/colors'
tw.bg(blue[500])

Palettes: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

Spacing

Numeric values map to the spacing scale automatically: 4 = 1rem, each unit = 0.25rem.

tw.p(4)   // 1rem
tw.p(8)   // 2rem
tw.p(0.5) // 0.125rem

Typography

Text sizes, font weights, and font families are all accessible via property-access tokens — no imports needed:

// Property-access tokens (recommended)
tw.text.lg               // font-size: 1.125rem; line-height: 1.75rem
tw.text._2xl             // font-size: 1.5rem; line-height: 2rem
tw.font.bold             // font-weight: 700
tw.font.semibold         // font-weight: 600
tw.fontFamily.sans       // system sans-serif stack
tw.fontFamily.serif      // system serif stack
tw.fontFamily.mono       // system monospace stack

// String lookups (equivalent)
tw.text('lg')
tw.font('700')
tw.fontFamily('sans')

Or import tokens directly for use with cx():

import { lg, _2xl } from 'typewritingclass/theme/typography'
tw.text(lg)

For Google Fonts, use the built-in googleFonts plugin:

import { tw, googleFonts } from 'typewritingclass'

tw.fontFamily(googleFonts('Inter'))
tw.fontFamily(googleFonts('Roboto', { weights: [400, 700] }))

Shadows, borders, sizes

tw.shadow('md')    // string lookup
tw.shadow('lg')
tw.rounded('lg')   // string lookup
tw.rounded('full')
tw.w('100%')
tw.h('100vh')

Import reference

Subpath	Key Exports
typewritingclass/theme/colors	Color palettes + white, black, transparent, currentColor
typewritingclass/theme/typography	xs, sm, base, lg, xl, _2xl-_9xl, thin-extrabold
typewritingclass/theme/shadows	sm, DEFAULT, md, lg, xl, _2xl, inner, none
typewritingclass/theme/borders	none, sm, DEFAULT, md, lg, xl, _2xl, _3xl, full
typewritingclass/theme/sizes	full, screen, screenH, min, max, fit, auto
typewritingclass/theme/animations	Animation keyframe presets
typewritingclass/theme/filters	Filter presets
typewritingclass/theme	All theme token exports (barrel)