Skip to content

Instantly share code, notes, and snippets.

@samselikoff
Created April 16, 2021 15:57
Show Gist options
  • Save samselikoff/b3c5126ee4f4e69e60b0af0aa5bfb2e7 to your computer and use it in GitHub Desktop.
Save samselikoff/b3c5126ee4f4e69e60b0af0aa5bfb2e7 to your computer and use it in GitHub Desktop.
Firefox plugin for Tailwind CSS. Add styles that target Firefox browser only.
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)}`
)}`;
});
});
}),
],
};
@samselikoff
Copy link
Author

@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!

@RyanNorooz
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment