typescriptcssv0.1

Search⌘K

v0.1 — TypeScript-authored styles

Write your styles in TypeScript. Ship them as CSS.

typescriptcss turns Tailwind-like utility chains into a real stylesheet at build time — type-checked, deduplicated, and rendered on the server with no runtime.

Get started Read the docs

card.tsx
1export default function Card() {
return (
  <div style={p[6].gap[4]
    .flex.col.items.center
    .bg['#0b1120'].rounded[4].dark.bg.black()}>
    <h2 style={text['#fff'].font.semibold()}>
      Zero runtime
    </h2>
  </div>
)
11}

Zero runtime

Rendered from the chain on the left. No CSS file, no class names.

Why typescriptcss

The ergonomics of utilities, without the stylesheet to maintain.

No CSS files

Author styles inline as chains. The build step collects them into one stylesheet — there is no file to keep in sync with your components.

Typed and completed

Every utility is a property your editor completes and the compiler validates. Invalid styles fail to type-check before they ship.

Zero runtime

Chains render to plain style objects on the server and collapse to classes at build. Nothing extra runs in the browser.