INSTALLATION · POSTCSS

Use typescriptcss alongside PostCSS

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.

typescriptcss does not currently ship a standalone PostCSS plugin. Keep your PostCSS pipeline and add the adapter for the bundler that runs it; this example uses Vite.

[01]

Install typescriptcss

Install the runtime and the Vite adapter. Your existing PostCSS plugins can stay in postcss.config.mjs.

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

[02]

Add the plugin to your config

Register typescriptcss at the bundler layer. Vite continues to pass the emitted CSS through your existing PostCSS configuration.

vite.config.ts
Copy
1import { defineConfig } from 'vite'
2import typescriptcss from '@typescriptcss/plugin-vite'
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 the normal Vite build. typescriptcss emits CSS first, and your configured PostCSS pipeline processes the build output.

Terminal
Copy
1npm run build

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

Framework guides