Log in
React Conferences
React Advanced 2025React Advanced 2025
ES

Rethinking React Styling for the RSC Era

Bree Hall
Bree Hall
Atlassian
Video thumbnail
This video will go public in 26 days
Multipass and Full ticket holders have instant access to event recordings.
Please login if you have one.
Get Multipass

Register a free account to unlock access to this video in 11 days.

Bookmark
Rate this content

El panorama del estilo en React está evolucionando rápidamente. Con Server Components, Tailwind v4 y la próxima era de estándares CSS, nuestros viejos hábitos necesitan una actualización. En esta masterclass, pondremos a prueba CSS Modules, Tailwind CSS y CSS-in-JS frente a demandas del mundo real como renderizado del lado del servidor, UI en streaming, tematización escalable y rendimiento en tiempo de ejecución. Aprenderás cómo las elecciones de estilo impactan el tamaño de la carga útil, el comportamiento asíncrono y la consistencia del sistema de diseño a escala. Desglosaremos los compromisos ocultos entre enfoques de CSS de utilidad primero, CSS con alcance y CSS-in-JS en tiempo de ejecución. Espera un marco práctico de toma de decisiones que puedas aplicar inmediatamente a tus proyectos, uno que equilibre la experiencia del desarrollador con el rendimiento en producción. Te irás con una hoja de ruta moderna para construir aplicaciones React que estén estilizadas para durar.

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

css
Bree Hall
Bree Hall
19 min
01 Dec, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Bree discute la evolución del estilo en React con React 19, Tailwind y componentes de renderizado del lado del servidor, enfatizando la generación de CSS estático. El cambio hacia CSS nativo y CSS modules para una mejor escalabilidad y control, y el aumento de la popularidad de Tailwind CSS por su enfoque de utilidad primero. Los desafíos en las implementaciones de estilo de React incluyen bibliotecas en tiempo de ejecución, UI en streaming, tematización escalable y reducción de sobrecarga. Panda CSS surge como un posible sucesor de Tailwind CSS, ofreciendo una combinación de experiencia CSS y JS. Las decisiones de estilo en 2025 son filosóficas, con Tailwind para velocidad, Panda CSS para sistemas de diseño complejos y CSS modules para estabilidad.
Available in English: Rethinking React Styling for the RSC Era
Video transcription and chapters available for users with access.
Available in other languages:

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

Construir un Sistema de Diseño con React y Tailwind CSS
React Summit 2022React Summit 2022
27 min
Construir un Sistema de Diseño con React y Tailwind CSS
Top Content
Shruti Balasa
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.
cssdesign systemsreact design systemstailwind react
Los Nuevos Valores Predeterminados de la Web Moderna
JSNation 2025JSNation 2025
10 min
Los Nuevos Valores Predeterminados de la Web Moderna
Top Content
Jeremias Menichelli
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
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
React Advanced 2023React Advanced 2023
19 min
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
Negar Jamalifard
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.
csstypescriptdesign systemscss-in-jsvanilla react
Cómo lograr la composición de diseño en React
React Summit 2022React Summit 2022
8 min
Cómo lograr la composición de diseño en React
Travis Waith-Mair
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.
cssreact componentsreact compositionreact layouts
Pasando de Css-In-Js en tiempo de ejecución a gran escala
React Summit 2023React Summit 2023
29 min
Pasando de Css-In-Js en tiempo de ejecución a gran escala
Siddharth Kshetrapal
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.
cssarchitectureperformancecss-in-jscase study