Firefox plugin for Tailwind CSS. Add styles that target Firefox browser only.

tailwind.config.js

const plugin = require("tailwindcss/plugin");

module.exports = {
  mode: "jit",
  purge: {
    content: ["./src/**/*.{js,ts,jsx,tsx,mdx,vue}"],
  },
  theme: { extend: {} },
  variants: {},
  plugins: [
    plugin(function ({ addVariant, e, postcss }) {
      addVariant("firefox", ({ container, separator }) => {
        const isFirefoxRule = postcss.atRule({
          name: "-moz-document",
          params: "url-prefix()",
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    }),
  ],
};

great implementation!

this is just a minor tweak to make it work with the tailwind custom opacity modifier like bg-black/25 or text-red-400/50

you might also notice this variant uses @supports (-moz-appearance:none) which has almost the same support for firefox and is known to be a good replacement for @-moz-document url-prefix() which is outdated and obsolete.

Talkin bout outdated and obsolete but using cjs import syntax *cough