Adds a `stuck:` (and `group-stuck:`) variant to Tailwind CSS.
npm install @zirkeldesign/tailwindcss-stuck-variantAdds a stuck: and group-stuck: variant to Tailwind CSS to style elements and child nodes which use the .sticky utility. Unfortunately since there is currently no CSS selector for :stuck Elements, this variant relies on a JavaScript helper, which uses the IntersectionObserver on those elements.
``shUsing npm
npm install @zirkeldesign/tailwindcss-stuck-variant
`js
// tailwind.config.js
module.exports = {
variants: {
height: ["responsive", "stuck"],
// or with extending the default variants
// @see https://tailwindcss.com/docs/configuring-variants#extending-default-variants
backgroundColor: ({ after }) => after(["stuck", "group-stuck"]),
// or in Tailwind CSS >= v2.0
extend: {
backgroundColor: ["stuck", "group-stuck"],
},
},
plugins: [
// Other plugins...
require("@zirkeldesign/tailwindcss-stuck-variant"),
],
};
``js
// app.js
require("@zirkeldesign/tailwindcss-stuck-variant/src/observer")();
`Usage
`html
Brand
``