Browserslist config for Tailwind v4

Here is a minimum browserslist config if you need to use Tailwind V4 in your project.

chrome >= 111, safari >= 16.4, firefox >= 128

Reference: https://tailwindcss.com/docs/compatibility#browser-support

It is recommended to show user a message if unsupported browser is detected. Below is an example how to do this in Astro using browserslist-useragent-regexp package.

---
import { getUserAgentRegex } from "browserslist-useragent-regexp";
import UnsupportedBrowserClient from "./UnsupportedBrowser.client";

const supportedBrowsersRegex = getUserAgentRegex({ allowHigherVersions: true });
---

<UnsupportedBrowserClient {...{ supportedBrowsersRegex }} client:idle />

import { useEffect, useState } from "react";

export default function UnsupportedBrowser({
  supportedBrowsersRegex,
}: {
  supportedBrowsersRegex: RegExp;
}) {
  const [isSupported, setIsSupported] = useState(true);

  useEffect(() => {
    setIsSupported(supportedBrowsersRegex.test(navigator.userAgent));
  }, []);

  return isSupported ? null : (
    <div className="order-first bg-yellow-300">
      <div className="container py-5">
        <p className="max-w-prose mx-auto">
          You are likely using an outdated or little-known browser.
          Some elements on this site may not display correctly.
        </p>
      </div>
    </div>
  );
}