Skip to content

Instantly share code, notes, and snippets.

@RyanNorooz
Forked from samselikoff/tailwind.config.js
Last active July 26, 2022 11:46
Show Gist options
  • Save RyanNorooz/ea2ba367f60d7d46d93efed0f6a7d066 to your computer and use it in GitHub Desktop.
Save RyanNorooz/ea2ba367f60d7d46d93efed0f6a7d066 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 = {
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