iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

CSS-in-JS

By · Reviewed & last updated · Part of React Tutorial

CSS-in-JS in 2026 is dominated by zero-runtime libraries - vanilla-extract, Panda CSS, and StyleX - because the runtime cost finally stopped paying for itself.

CSS-in-JS - zero runtime

EXAMPLE
// 1. Vanilla Extract - styles authored in TypeScript, extracted at build time

// button.css.ts
import { style, styleVariants } from '@vanilla-extract/css';

export const button = style({
  padding: '0.5rem 1rem',
  borderRadius: 6,
  border: 'none',
  cursor: 'pointer',
  fontWeight: 500,
});

export const variants = styleVariants({
  primary:   { backgroundColor: '#2563eb', color: 'white' },
  secondary: { backgroundColor: '#e5e7eb', color: '#111' },
});


// Button.tsx
import * as s from './button.css';

type Props = { variant: 'primary' | 'secondary'; children: React.ReactNode };

export function Button({ variant, children }: Props) {
  return <button className={\`${s.button} ${s.variants[variant]}\`}>{children}</button>;
}


// 2. Panda CSS - utility-first, type-safe, zero runtime

// panda.config.ts
import { defineConfig } from '@pandacss/dev';
export default defineConfig({ presets: ['@pandacss/preset-base'] });


// Card.tsx
import { css } from 'styled-system/css';

export function Card({ children }) {
  return (
    <div className={css({
      rounded: 'xl',
      p: 6,
      bg: 'white',
      shadow: 'sm',
      _hover: { shadow: 'md' },
    })}>
      {children}
    </div>
  );
}


// 3. StyleX (Meta) - atomic CSS, deterministic, used by Facebook in production

// header.stylex.ts
import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  base:   { padding: 16, background: '#fff' },
  sticky: { position: 'sticky', top: 0, zIndex: 10 },
});

export function Header({ sticky }) {
  return <header {...stylex.props(styles.base, sticky && styles.sticky)}>...</header>;
}


// Why zero runtime
// - Emotion / styled-components pay a per-render cost for class generation
// - Build-time extraction outputs static CSS - cacheable, no FOUC, smaller JS
// - TypeScript-aware authoring keeps DX while removing the cost

Why it matters

In 2026 the choice is mostly between Tailwind, Vanilla Extract, Panda, and StyleX - all zero-runtime. Reach for Tailwind for speed of delivery, Vanilla Extract when you want CSS files in TS, Panda when you want utility-class output without writing utilities, and StyleX at Meta scale.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// styled-components / emotion / stitches / vanilla-extract — pick one.
const Button = styled.button`background:#04AA6D;color:#fff;padding:8px 16px;`;
Try it Yourself »

Discussion

Loading…