Using Browserlist

What is Browserlist?

Browserlist is a configuration tool used by popular JavaScript tools (e.g., Autoprefixer, Babel, ESLint, PostCSS, Webpack) to define your project's supported browsers.

For Hyvä themes (v1.3.6+), Browserlist is integrated to ensure browser compatibility based on the supported browsers list. This allows seamless use of the latest Tailwind CSS versions across targeted browsers.

Adding or Configuring Browserlist

Manage Browserlist configuration within your project's package.json file. New Hyvä themes (v1.3.6+) include a default configuration, typically:

{
    "browserslist": [
        "> 0.5% and not dead"
    ]
}

Adjust this configuration to meet your specific browser support requirements. For detailed options, consult the official Browserlist Docs.

Using Browserlist with PostCSS Plugins with Tailwind v3

Hyvä uses the postcss-preset-env plugin to ensure CSS compatibility with older browsers. This plugin replaces Autoprefixer by incorporating its functionality internally.

How postcss-preset-env Works

This plugin automatically converts modern CSS properties for older browser compatibility. For example, a Tailwind CSS class like:

.inset-4 {
  inset: 1rem;
}

Becomes:

.inset-4 {
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
}

This ensures consistent styling across browsers.