Overview

Browser Support

Panda CSS is built with modern CSS features and uses PostCSS (opens in a new tab) to add support for older browsers.

Panda supports the latest, stable releases of major browsers that support the following features:

• CSS Variables (opens in a new tab)
• CSS Cascade Layers (opens in a new tab)
• Modern selectors, such as :where() (opens in a new tab) and :is() (opens in a new tab)

Browserlist

Based on the above criteria, the following browsers are supported:

>= 1%
last 1 major version
not dead
Chrome >= 99
Edge >= 99
Firefox >= 97
iOS >= 15.4
Safari >= 15.4
Android >= 115
Opera >= 73

Polyfills

In event that you need to support older browsers, you can use the following polyfills in your PostCSS config:

• autoprefixer (opens in a new tab): Adds vendor prefixes to CSS rules using values from Can I Use (opens in a new tab).
• postcss-cascade-layers (opens in a new tab): Adds support for CSS Cascade Layers.

Here is an example of a postcss.config.js file that uses these polyfills:

module.exports = {
  plugins: [
    '@pandacss/dev/postcss',
    'autoprefixer',
    '@csstools/postcss-cascade-layers'
  ]
}