Utilities for controlling the scroll snap alignment of an element. Quick reference Class Properties snap-start scroll-snap-align: start; snap-end scroll-snap-align: end; snap-center scroll-snap-align: center; snap-align-none scroll-snap-align: none; ...
.ScrollSnapper{display:flex;scroll-snap-type:x mandatory;overflow-x:scroll;scroll-behavior:smooth; } .ScrollSnapper>*{width:100%;flex-shrink:0;scroll-snap-align:center;scroll-snap-stop:always; } Then use it in your JSX: functionApp(){return(Page 1Page 2Page 3)} Here are the same styles...
v4.0 Beta Documentation → Preview the next Tailwind CSS.Interactivity Scroll Padding Utilities for controlling an element's scroll offset within a snap container. Quick reference Class Properties scroll-p-0 scroll-padding: 0px; scroll-px-0 scroll-padding-left: 0px; scroll-padding-right: 0...
Tailwind CSS Mandatory Snap Points This example shows how to use Tailwind CSS Scroll Snap Type Classes by using thesnap-mandatoryclass, which ensures that as you scroll horizontally, the items always align to the nearest snap point, improving visual alignment. ...
{ width: 350px; height: 200px; overflow-y: scroll; overflow-x: hidden; white-space: nowrap; scroll-snap-type: y mandatory; } .scrolling-section1, .scrolling-section2, .scrolling-section3 { flex: 0 0 auto; width: 320px; height: 200px; scroll-snap-align: center; } .scrolling-...