Core library for the Typewriting Class CSS-in-TS framework. Provides utility functions, modifiers, theme tokens, and the composition API.
npm install typewritingclassCore library for the Typewriting Class CSS-in-TS framework. Provides utility functions, modifiers, theme tokens, and the composition API.
``bash`
bun add typewritingclass
`ts
import { tw } from 'typewritingclass'
const card = tw
.bg('white').rounded('lg').p(6).flex.gap(4)
.hover(tw.bg('blue-50'))
.md.p(8)
.dark(tw.bg('slate-800'))
`
`ts
import { cx, p, bg, textColor, rounded, flex, gap, when } from 'typewritingclass'
import { hover, md, dark } from 'typewritingclass'
import { blue, white, slate } from 'typewritingclass/theme/colors'
const card = cx(
p(6), bg(white), rounded('lg'),
flex(), gap(4),
when(hover)(bg(blue[50])),
when(md)(p(8)),
when(dark)(bg(slate[800])),
)
`
- tw — proxy-based chainable API with access to all utilities and modifiers via a single import
- Property syntax for modifiers: tw.hover.bg('blue-500')tw.hover(tw.bg('blue-500').textColor('white'))
- Function syntax for multi-utility modifiers: tw.flex.flexCol.relative
- Value-less utilities as properties: .toString()
- Resolves to class string via , .value, .className, or template literals
- cx(...rules) — compose utilities into a single class name
- when(...modifiers)(...rules) — apply styles conditionally
| Category | Functions |
|---|---|
| Spacing | p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml, gap, gapX, gapY |bg
| Colors | , textColor, borderColor |text
| Typography | , font, tracking, leading, textAlign |flex
| Layout | , flexCol, flexRow, grid, gridCols, gridRows, display, items, justify, self |w
| Sizing | , h, size, minW, minH, maxW, maxH |relative
| Position | , absolute, fixed, sticky, top, right, bottom, left, inset, z |rounded
| Borders | , roundedT, roundedB, roundedL, roundedR, border, borderT, borderR, borderB, borderL, ring |shadow
| Effects | , opacity, backdrop |cursor
| Interactivity | , select, pointerEvents |overflow
| Overflow | , overflowX, overflowY |
| Type | Modifiers |
|---|---|
| Pseudo-classes | hover, focus, active, disabled, focusVisible, focusWithin, firstChild, lastChild |sm
| Responsive | (640px), md (768px), lg (1024px), xl (1280px), _2xl (1536px) |dark
| Color scheme | |
`ts`
import { blue, slate } from 'typewritingclass/theme/colors'
import { bold, lg } from 'typewritingclass/theme/typography'
import { md } from 'typewritingclass/theme/shadows'
import { lg as lgRadius } from 'typewritingclass/theme/borders'
`ts
import { createTheme } from 'typewritingclass/theme/createTheme'
const theme = createTheme({
colors: { brand: { 500: '#6366f1' } },
})
`
`ts
import { dcx, bg, p, dynamic } from 'typewritingclass'
// Wrap a runtime value with dynamic(), then compose via dcx()
const { className, style } = dcx(p(4), bg(dynamic(userColor)))
`
`ts
import { css } from 'typewritingclass'
cx(p(4), css({ transition: 'all 200ms ease' }))
`
| Path | Contents |
|---|---|
| typewritingclass | Core API (cx, when, all utilities and modifiers) |typewritingclass/theme
| | All theme token exports |typewritingclass/theme/colors
| | Color scales |typewritingclass/theme/typography
| | Font sizes, weights, line heights |typewritingclass/theme/shadows
| | Shadow presets |typewritingclass/theme/borders
| | Border radius tokens |typewritingclass/theme/sizes
| | Named sizes |typewritingclass/theme/animations
| | Animation keyframe presets |typewritingclass/theme/filters
| | Filter presets |typewritingclass/theme/createTheme
| | createTheme() |typewritingclass/inject
| | Runtime style injection (auto-initializing side-effect import) |typewritingclass/runtime
| | __twcDynamic() (internal compiler helper) |typewritingclass/rule
| | createRule(), createDynamicRule(), wrapWithSelector(), wrapWithMediaQuery()` |