Locked Video

Please log in or buy the course to watch

Buy Now

Atomic vs Config Recipe

So far in this course, we've built recipes using the atomic approach that Panda provides - atomic recipes. This approach generates atomic classes in the DOM based on the variants we use.

In Panda, there's another type of recipe called, config recipe.

Config recipes are very similar to atomic recipes except that they're created in the panda.config file instead.

Config recipes come with a lot more benefits than atomic, such as:

  • they makes it easier to share or reuse recipes
  • the classes and styles are grouped into a human-readable class name
  • only the recipe variants you use will be generated in the final CSS
  • they provide automatic jsx tracking