The Internals of compile-time CSS-in-JS

This talk is confirmed. The time of the talk will be announced soon.

The recording will be published after editing. Multipass and Full ticket holders have early access.

Styled-components lost against Tailwind, partly due to better performance while trading it for a unique API. Can’t you have both, a fast runtime and a familiar API?

We replaced styled-components with a build-time compiler in next-yak without changing a single line of user code and saw surprising results: INP improved over 10%, our SSR latency and our pod count dropped significantly. But the path there wasn’t simple.

This talk is about three problems that make compile-time CSS-in-JS genuinely hard: dynamic interpolations, cross-file references and build-time evaluation. I will show what we solved, how we solved it and what we couldn’t fully solve and why the remaining gap is a harder problem than it looks.

This talk has been presented at React Advanced 2026, check out the latest edition of this React Conference.

css css-in-js

Luca Schneider

Video transcription, chapters and summary will be available later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Build a Design System with React and Tailwind CSS

React Summit 2022

27 min

Build a Design System with React and Tailwind CSS

Top Content

Shruti Balasa

Tech Educator

This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.

design systems css react design systems tailwind react

Rethinking CSS - Introducing Stylex

React Finland 2021

25 min

Rethinking CSS - Introducing Stylex

Top Content

Naman Goel

OpenAI

CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.

css css-in-js stylexjs react native

The New Defaults of the Modern Web

JSNation 2025

10 min

The New Defaults of the Modern Web

Top Content

Jeremias Menichelli

Storyblok

The speaker reflects on past experiences developing various websites, highlighting challenges faced in achieving visually unique sites with similar functionalities. They discuss hacks used in web development, the evolution of CSS and web APIs, and express a desire for modern web defaults. Challenges with mobile viewport height on touch devices are described, along with the evolution of hacks into simpler CSS solutions. The evolution of scroll behavior, scroll snapping challenges, and scrolling interception techniques are also discussed. The text covers animation challenges, transitioning to promise-based animations, and the use of frameworks for animations and view transitions in web development.

css

Styles and Theming with Restyle in React Native

React Summit Remote Edition 2020

8 min

Styles and Theming with Restyle in React Native

Top Content

Haris Mahmood

Shopify

Today's Talk focuses on styles and theming in React Native, specifically from the perspective of the arrive app. The challenges faced with managing colors and font styles are addressed by Restyle, which provides a type-enforced system for building UI components with themability. The implementation of color palettes, spacing, and dark mode is discussed, along with the benefits of using Restyle's predefined components. TypeScript's autocompletion and other advantages are highlighted, and listeners are encouraged to explore the project on GitHub for more features.

react native css-in-js shopify react native

Type-safe Styling for React Component Packages: Vanilla Extract CSS

React Advanced 2023

19 min

Type-safe Styling for React Component Packages: Vanilla Extract CSS

Watch video: Type-safe Styling for React Component Packages: Vanilla Extract CSS

Negar Jamalifard

Frontend Developer

Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

typescript design systems css css-in-js vanilla react

Moving on From Runtime Css-In-Js at Scale

React Summit 2023

29 min

Moving on From Runtime Css-In-Js at Scale

Watch video: Moving on From Runtime Css-In-Js at Scale

Siddharth Kshetrapal

GitHub

This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.

performance case study css css-in-js architecture