Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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)}`
)}`;
});
});
}),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment