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

tailwind.config.js

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