1. Introduction - Why PandaCSS?
2. Create a remix app through npx create-remix@latest
3. Setup PandaCSS inside the remix app
4. How to implement design tokens
5. Create and use recpies
6. Implement theme toggle using pandacss recipe
7. Conclusion

Current landscape for styling React apps

When working on a web application or a modern-day website, writing styles has become increasingly complex due to the various build toolchains being created to accommodate the latest frontend frameworks. This is especially true when writing web apps and sites using the React ecosystem. It is even more cumbersome when you want to implement styles on server-rendered content.

Today, there are several approaches you can take to write styles in your project. You can write plain old CSS, which is constantly improving, or you can use Sass, CSS modules, or modern libraries like Tailwind. Each approach focuses on solving a specific set of problems that developers face when writing CSS styles for a modern web app or site.

The most successful approach for writing CSS in React-based apps has been CSS-in-JS libraries like styled-components and emotion. These libraries allow developers to write styles in a component-specific manner within the component logic itself, providing a great developer experience. This approach worked well when building apps and sites focused on the client side. The server would send down the required JS bundle, which would contain the JSX, the component logic, and the required CSS. The CSS could then be extracted and processed client-side to apply the component styles. However, this approach does not work well with server-rendered content. While developers appreciate the productivity of these CSS-in-JS libraries, implementing them in server-rendered apps becomes a performance issue due to increased bundle sizes and the need for a second render for the styles to take effect.

Introduction to PandaCSS

To solve the issue of performance as well as other shortcomings of CSS-in-JS libraries for server rendered apps, a number of new CSS-in-JS libraries have come up which focus on zero-runtime - meaning it generates static CSS at build-time. Furthermore, it also includes support for Typescript to provide type safety along with design token support.

App Setup

This is where we setup the app using Remix and also setup PandaCSS config should be discussed here.

Introduction of PandaCSS recipes

Explain PandaCSS recipes and how are they useful

Implementing a Theme toggle

Implementing a dark/light theme toggle that allows you to use the PandaCSS theme tokens and recipes

Conclusion

Focus on the developer experience. How the usage of PostCSS allows us to still use CSS-in-JS approach while addressing the performance issues and