Package Exports
- @zirkeldesign/tailwindcss-stuck-variant
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zirkeldesign/tailwindcss-stuck-variant) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Tailwind CSS stuck variant
Adds 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.
Installation
# Using npm
npm install @zirkeldesign/tailwindcss-stuck-variant
# Using yarn
yarn add @zirkeldesign/tailwindcss-stuck-variant// 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"),
],
};// app.js
require("@zirkeldesign/tailwindcss-stuck-variant/src/observer")();Usage
<!-- Add shadow when the header is stuck. -->
<header class="sticky top-0 group stuck:shadow">
<!-- Take the full height when its parent is stuck. -->
<div class="h-12 group-stuck:h-8">Brand</div>
</header>