How to use the sticky utility in TailwindCSS?

How to use the sticky utility in TailwindCSS?

MistralCSS's photo
MistralCSS

Published on Jan 9, 2021

1 min read

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