INSTALLATION · TSDOWN

Install typescriptcss with tsdown

typescriptcss is a zero-runtime CSS-in-JS library. You write styles as inline chains directly on your elements, and the build plugin collects them into a stylesheet with hashed class names.

tsdown accepts Rollup-compatible plugins, so typescriptcss integrates through the Rollup adapter.

[01]

Install typescriptcss

Install the runtime package and the Rollup adapter used by tsdown.

Terminal
Copy
1npm install typescriptcss
2npm install -D @typescriptcss/plugin-rollup

[02]

Add the plugin to your config

Add the adapter to the plugins array in your tsdown configuration.

tsdown.config.ts
Copy
1import { defineConfig } from 'tsdown'
2import typescriptcss from '@typescriptcss/plugin-rollup'
3
4export default defineConfig({
5        plugins: [typescriptcss()],
6})

[03]

Write your styles inline

Import the utilities you need and build a chain, then call it to produce the style object. No class names or separate CSS file are required.

App.tsx
Copy
1import { flex, gap, text, bg } from 'typescriptcss'
2
3export const App = () => (
4        <div style={gap[4].flex.col.items.center.bg['#020617']()}>
5                <h1 style={text[8].text['#f8fafc']()}>Hello</h1>
6        </div>
7)

[04]

Compose states and breakpoints

Insert dark, sm, md, or lg anywhere in the chain to scope the styles after it. Everything stays in the same expression.

Button.tsx
Copy
1import { flex, px, bg, text } from 'typescriptcss'
2
3export const Button = () => (
4        <button style={px[5].py[2].text['#020617'].flex.bg['#22d3ee'].md.px[8].dark.bg['#0b1120']()}>
5                Save
6        </button>
7)

[05]

Run the build

Run tsdown. The extracted styles are emitted as a CSS build asset next to your JavaScript output.

Terminal
Copy
1npx tsdown

Using another platform?Every adapter uses the same typed chain API. Choose the integration that owns your application build.

Framework guides