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.

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    // firefox only modifier
    plugin(({ addVariant, e, postcss }) => {
      addVariant('firefox', ({ container, separator }) => {
        const isFirefoxRule = postcss.atRule({
          name: 'supports',
          params: '(-moz-appearance:none)',
        })
        isFirefoxRule.append(container.nodes)
        container.append(isFirefoxRule)
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1).replaceAll('\\', '')}`
          )}`
        })
      })
    }),
  ],
}