Styled & SASSy: Choosing the Right React Styling Solution

React’s styling landscape is rapidly evolving. With React 19, Tailwind v4, and major changes across the CSS ecosystem, the way we style components needs to be revisited, especially when performance, DX, and scalability are on the line.

In this talk, we’ll evaluate three of the most widely used approaches in modern React apps, CSS Modules, Tailwind CSS, and CSS-in-JS, and put them head-to-head against the realities of today’s frontend demands: server components, async rendering, scalable theming, and runtime performance.

You’ll walk away with a clear, practical framework for choosing the right styling approach for your project — one that balances developer experience, design system needs, and long-term maintainability.

We’ll break down:

- How React 19 and server components are reshaping styling decisions

- Trade-offs between utility-first, scoped CSS, and runtime CSS-in-JS

- Common pitfalls that surface at scale and how to future-proof your choice

Whether you're starting a new app or re-evaluating a legacy codebase, this talk will help you make informed, future-focused styling decisions.

This talk has been presented at React Summit US 2025, check out the latest edition of this React Conference.

FAQ

Bri is a senior developer advocate at Atlassian.

The talk focuses on choosing the right React styling solution and discusses various styling approaches for React applications.

The three main styling paradigms discussed are CSS modules, Tailwind CSS, and CSS in JS.

Criticisms include performance issues, problems with server-side rendering, and the flash of unstyled content.

Tailwind CSS is gaining popularity due to its CSS-first configuration, faster incremental builds, and native use of CSS features.

React 19 introduces features like resource hoisting, form actions, async primitives, and server components that affect styling solutions.

Panda CSS is a zero runtime compiler that offers a familiar styled syntax, generates static CSS files, and provides type safety, making it suitable for design systems.

Native CSS has improved with features like nesting, the has selector, and container queries, reducing the need for preprocessors like Sass.

Key factors include compatibility with server components, static CSS generation, type safety, native CSS feature usage, and streaming capabilities.

Bri recommends using Atlassian's UI library for a native look and feel, but developers can also bring their own styling solutions.

css

Bree Hall

28 min

18 Nov, 2025

Comments

Video Summary and Transcription

Bri explores React styling solutions and the CSS landscape in 2025, highlighting challenges with styled components and the emergence of Panda CSS. React 19 introduces new features like resource hoisting and form actions, impacting styling practices. Discussions revolve around CSS paradigms, Tailwind CSS for utility-first approach, and the importance of dynamic state in styling evolution. Considerations for selecting the right styling solution based on team size, experience, and interactivity needs are emphasized, along with insights on optimizing CSS tools and Panda CSS adoption.

Video transcription and chapters available for users with access.

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

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

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.

vanilla react typescript design systems css-in-js css

How to achieve layout composition in React

React Summit 2022

8 min

How to achieve layout composition in React

Travis Waith-Mair

Senior front-end developer @ Plex inc.

This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.

react components css react composition react layouts

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 css-in-js css architecture case study