Tailwind Browser Variants – Documentation

Installation

npm install @amirafa/tailwind-browser-variants

Adding to Tailwind

ESM (type: "module", Next.js, Vite, etc.)

in tailwind.config.js

import browserVariants from "@amirafa/tailwind-browser-variants";

export default {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  plugins: [browserVariants],
};

CommonJS

in tailwind.config.js

const browserVariants = require("@amirafa/tailwind-browser-variants");

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  plugins: [browserVariants],
};

Usage Example

<div class="
  chrome:bg-red-500
  safari:bg-blue-500
  firefox:bg-green-500
  edge:bg-yellow-500
  opera:bg-purple-500
  ie:bg-gray-500
  brave:bg-orange-500
  vivaldi:bg-pink-500
  chromium:bg-cyan-500
">
  Browser-specific styles
</div>

Supported Browsers & Variants

| Browser | Variant | Detection | |--------|---------|-----------| | Chrome | chrome: | @supports (-webkit-appearance:none) | | Safari | safari: | @supports (-webkit-touch-callout:none) | | Firefox | firefox: | @-moz-document url-prefix() | | Edge | edge: | @supports (-ms-ime-align:auto) | | Opera | opera: | @supports (-o-object-fit: fill) | | Internet Explorer | ie: | @media (-ms-high-contrast) | | Brave | brave: | heuristic (Chromium + paint API) | | Vivaldi | vivaldi: | heuristic (marquee overflow) | | Chromium | chromium: | generic chromium engine detection |

Notes

• Heuristic detections (Brave, Vivaldi, generic Chromium) are best‑effort and may not be 100% reliable.
• Works with all Tailwind versions supporting addVariant (Tailwind v3+ recommended).