INSTALLATION · FRAMEWORK GUIDES

Choose a framework adapter

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.

Choose the adapter at the layer that owns your build. All adapters share the same collector and the same inline-chain authoring API.

[01]

Install typescriptcss

Install the runtime, then add the adapter that matches your build tool. Install only one adapter for a typical application.

Terminal
Copy
1npm install typescriptcss
2
3npm install -D @typescriptcss/plugin-vite
4# or
5npm install -D @typescriptcss/plugin-next
6# or
7npm install -D @typescriptcss/plugin-rollup

[02]

Add the plugin to your config

Choose your config
Copy
1Vite       → vite.config.ts
2Next.js    → next.config.ts
3Rollup     → rollup.config.ts
4tsdown     → tsdown.config.ts

[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

Use the framework’s normal production build command after registering its adapter.

Terminal
Copy
1npm run build

Ready to start?Vite is the smallest setup if you want to try typescriptcss in a new project.

Using Vite