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)}`
          )}`;
        });
      });
    }),
  ],
};

@andrewrjohn hm I don't. When I made this it worked in ff only for me, but maybe something has changed? If you google something and find out you should be able to update the at rule to make it work!

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('\\', '')}`
          )}`
        })
      })
    }),
  ],
}