Scroll Snap

Scroll Snap Align

Class	Properties	Description
`snap-normal`	scroll-snap-stop: normal
`snap-always`	scroll-snap-stop: always

Class	Properties	Description
`snap`	scroll-snap-type: var(--scroll-snap-axis, both) var(--scroll-snap-strictness, mandatory)	main snap class
Strictness
`snap-none`	--scroll-snap-strictness: none
`snap-mandatory`	--scroll-snap-strictness: mandatory
`snap-proximity`	--scroll-snap-strictness: proximity
Axis
`snap-x`	--scroll-snap-axis: x
`snap-y`	--scroll-snap-axis: y
`snap-block`	--scroll-snap-axis: block
`snap-inline`	--scroll-snap-axis: inline
`snap-both`	--scroll-snap-axis: both

Class	Properties	Description
Margin
`snap-m${direction}-${value}`	scroll-snap-margin`${direction}`: `${value}`	same Margin Utilities
Padding
`snap-p${direction}-${value}`	scroll-snap-padding`${direction}`: `${value}`	same Padding Utilities
Other
`scrollbar-hide`	scrollbar-width: none ::-webkit-scrollbar: { display: none }	visual hide scrollbar

windi.config.js

export default {
  plugins: [
    require('windicss/plugin/scroll-snap'),
    // ...
  ],
}

with TypeScript:

windi.config.ts

import scrollSnapPlugin from 'windicss/plugin/scroll-snap'

export default defineConfig({
  plugins: [
    scrollSnapPlugin,
    // ...
  ],
})