There have been some great strides in how web applications are styled, but with the introduction of the App Router and React Server Components, there are new challenges to face. Client components, context issues, and the need for responsive design all come into play.
In this workshop, you'll take a tour through some of the most popular options for building responsive, theme-ready UIs in Next.js. You'll practice with:
- CSS Modules: A classic (but sometimes verbose) way to style components.
- Tailwind CSS: The utility class approach has gained popularity, but requires some configuration steps and strategy to keep readable.
- StyleX: Meta's StyleX library provides a way for granular control over components, design tokens, and theming.
- Pigment CSS: Material UI is a popular component library, but isn't compatible with React Server Components. In response, the team created Pigment CSS, which increases performance while keeping styles organized.
- Emotion: While not the most modern approach, many applications still use Emotion for styling. Learn how to configure the library for supporting App Router applications.