How to use the sticky utility in TailwindCSS?

How to use the sticky utility in TailwindCSS?

sticky fig2.png

The sticky utility in TailwindCSS lets you stick an element to its parent. The main difference between the sticky utility & the fixed utility is that fixed let you fix the element to the window object.

Sticky bottom-0 and sticky top-0

With the sticky utility, you can stick your element on the top of the parent with top-0 or on the bottom with bottom-0 (Note: You need to put your element on the bottom first, with a flexbox for example)

Sticky in TailwindCSS

Live example 👉 play.tailwindcss.com/el0yWXm00Z Documentation 👉 tailwindcss.com/docs/position#sticky

 
Share this