INSTALLATION · NEXT.JS

Install typescriptcss with Next.js

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.

The Next.js adapter configures both Turbopack and webpack so the same setup works in development and production.

[01]

Install typescriptcss

Install the runtime package and the Next.js adapter.

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

[02]

Add the plugin to your config

Wrap your Next.js configuration with the typescriptcss adapter.

next.config.ts
Copy
1import typescriptcss from '@typescriptcss/plugin-next'
2
3const withTypescriptcss = typescriptcss()
4
5export default withTypescriptcss({})

[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 Next.js production build. The adapter transforms application source files and injects the collected 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