CSS Components: Tailwind, Panda, Scoped, Modules, Classes, Variables, CSS-in-JS and Sprinkles!

In this episode of Syntax, Wes and Scott talk about CSS components, including class-based components, CSS modules, scoped CSS, utility CSS, and CSS-in-JS strategies. They share their thoughts, what differentiates these approaches, and why you may (or may not) want to use them.

Show Notes

• 00:00 - Welcome to Syntax!
• 01:30 - Brought to you by Sentry.io.
• 02:11 - What makes a good CSS component system?
• 07:54 - Component vs part of a component
• 13:26 - CSS Modules
• 15:56 - Scoped CSS
  • @scope - (82% support!) ff behind flag
    • https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
• 21:07 - How is Panda different from styled components?
  • Panda
  • StyleX
• 00:00 - Utility CSS
  • TailwindCSS
  • Uno
• 31:08 - Utility Sprinkles
• 34:13 - CSS variables
  • open-props.style

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads