https://github.com/zirkeldesign/tailwindcss-stuck-variant

Adds a `stuck:` (and `group-stuck:`) variant to Tailwind CSS.
https://github.com/zirkeldesign/tailwindcss-stuck-variant

sticky stuck tailwind tailwind-variant tailwindcss tailwindcss-plugin

Last synced: 3 months ago
JSON representation

Adds a `stuck:` (and `group-stuck:`) variant to Tailwind CSS.

• Host: GitHub
• URL: https://github.com/zirkeldesign/tailwindcss-stuck-variant
• Owner: zirkeldesign
• Created: 2020-09-23T08:25:16.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-08-27T13:28:30.000Z (about 3 years ago)
• Last Synced: 2024-07-10T17:53:58.875Z (4 months ago)
• Topics: sticky, stuck, tailwind, tailwind-variant, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage:
• Size: 43 KB
• Stars: 10
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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

```sh

# Using npm

npm install @zirkeldesign/tailwindcss-stuck-variant

# Using yarn

yarn add @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")();

```

OR

```js

// Vue 2 app.js

import stuck from "@zirkeldesign/tailwindcss-stuck-variant/src/observer";

const app = new Vue({

  el: "#app",

  mounted() {

    stuck();

  },

});

```

## Usage

```html

  

  
Brand


```

## Passing custom parameters

Under the hood, the following defaults are set:

```js

{

  selector = ".sticky",

  stuckClass = "is-stuck",

  helperClass = "stuck-observer-helper",

  createHelperElement = true,

  rootMargin = "-1px 0px 0px 0px",

}

```

These may be overridden by passing a configuration object to the initializer:

```js

import stuck from "@zirkeldesign/tailwindcss-stuck-variant/src/observer";

stuck({

  rootMargin: "-50px 0px 0px 0px",

});

```