INSTALLATION · VITE

Install typescriptcss with Vite

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.

Add the Vite adapter to an existing or new Vite project. It transforms style chains during development and emits the collected CSS in production.

[01]

Install typescriptcss

Install the runtime package and the Vite adapter.

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

[02]

Add the plugin to your config

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 Vite build. The adapter collects every chain, removes duplicates, and emits the resulting styles.

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