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