Tailwind Linting based on Browserlist

[LukasBombach]

Hey,

Tailwind has classes for features that generally work on modern browsers. In my line of work (newspapers) we have to support some older browsers, like iOS Safari 12, where flex gap does not work.

We use browserlist as a basis to deal with this for JavaScript

I wonder if there are ways to apply apply that to Tailwind. Specifically, if

• there's linting that can tell us when a class is not supported by one of the browsers in the browserlist
• classes can be disabled completely when they are not supported

[Drako01]

I wouldn't rely on Tailwind itself as the browser-compatibility validator.

Tailwind provides utility classes, but the compatibility question concerns the underlying CSS properties and their browser support.

For example, gap-* in a flex container ultimately depends on CSS flexbox gap support. The class name alone doesn't tell you whether your target browser supports that feature.

I would build compatibility checking around the generated CSS:

1. Compile the Tailwind stylesheet.
2. Define a supported-browser matrix using Browserslist.
3. Run CSS compatibility checks against the compiled properties and values.
4. Report unsupported declarations back to the relevant component or source location.
5. Provide explicit fallbacks where needed.

Tools built around MDN browser-compatibility data or Can I Use can help, although they won't necessarily detect every interaction between CSS features.

Autoprefixer can resolve some vendor-prefix requirements, but it cannot polyfill missing layout functionality such as flexbox gap in Safari 12.

For that particular case, you may need margin-based fallbacks or a different layout strategy.

One important consideration for new projects: Tailwind CSS v4 targets modern browsers. Its core compatibility baseline is significantly newer than Safari 12.

If supporting Safari 12 is mandatory, I'd assess whether an older Tailwind release and a dedicated compatibility pipeline are more appropriate.

Reference: https://tailwindcss.com/docs/compatibility

The key principle is to validate the compiled CSS against your actual support matrix, not only inspect the Tailwind class names.