Why Panda: CSS for RSCs is Changing the Game

To try everything Brilliant has to offer—free—for a full 30 days, visit https://brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.

Code: https://github.com/jherr/barbenheimer
Tailwind2Panda: https://tw2panda-astahmer.vercel.app/
tw2panda-cli: https://www.npmjs.com/package/tw2pand...

👉 Tailwind to Panda CSS Converter: https://github.com/jherr/tw2panda-cli

👉 Upcoming NextJS course: https://pronextjs.dev
👉 I'm a host on the React Round-Up podcast: https://devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ
👉 Discord server signup: Discord: discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF


0:00 Introduction
0:59 Project Introduction
2:09 NextJS Setup
4:16 Page Setup
4:53 Tailwind To Panda
5:58 Panda Basics
7:25 Panda Patterns
10:57 Grid Layout
12:32 CSS-in-JS Without JS
12:59 NextJS Server Actions
16:05 Atomic Panda
19:06 Outroduction

This video was sponsored by Brilliant

• #science_technology
• #html_css
• #css
• #css_color
• #background_css
• #tailwind
• #tailwind_css
• #panda_css
• #panda
• #panda_css_in_js
• #panda_css_chakra
• #panda_css_nextjs
• #css_code
• #html_and_css
• #css_animation
• #flex
• #animation
• #grid
• #react
• #react_js
• #bootstrap
• #css_grid
• #flexbox
• #transition_css
• #styled_components
• #react_server_components_css
• #css_in_js
• #css_for_rscs
• #server_components_css
• #css_server_components