🧭 Utilidades Snap en Tailwind CSS

Clase Tailwind Equivalente CSS Descripción Ejemplo
snap-none
scroll-snap-type: none; Desactiva el scroll snap.
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-x
snap-mandatory
scroll-snap-type: x mandatory; Activa el scroll snap horizontal estricto.
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-y
snap-mandatory
scroll-snap-type: y mandatory; Activa el scroll snap vertical estricto.
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-x
snap-proximity
scroll-snap-type: x proximity; Activa el scroll snap horizontal flexible.
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-y
snap-proximity
scroll-snap-type: y proximity; Activa el scroll snap vertical flexible.
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-both
snap-mandatory
scroll-snap-type: both mandatory; Activa el scroll snap multiple estricto.
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-both
snap-proximity
scroll-snap-type: both proximity; Activa el scroll snap multiple flexible.
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-align-none
scroll-snap-align: none; Individualmente cada elemento no alineara (esta utilidad se le coloca a cada elemento)
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-start
scroll-snap-align: start; Individualmente cada elemento se alineara desde el inicio (esta utilidad se le coloca a cada elemento)
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-center
scroll-snap-align: center; Individualmente cada elemento se alineara desde el centro (esta utilidad se le coloca a cada elemento)
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-end
scroll-snap-align: end; Individualmente cada elemento se alineara desde el final (esta utilidad se le coloca a cada elemento)
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-normal
scroll-snap-stop: normal; Este valor permite un desplazamiento más fluido a través de las posiciones de ajuste. El desplazamiento puede "saltar" o pasar por encima de una posición de ajuste si el usuario realiza un gesto rápido, sin detenerse necesariamente en cada punto de ajuste. (esta utilidad se le coloca a cada elemento)
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55
snap-always
scroll-snap-stop: always; IEste valor fuerza al navegador a detenerse en cada posición de ajuste, incluso si el usuario intenta desplazarse rápidamente. Esto garantiza que el usuario no se pierda ninguna posición de ajuste y que la experiencia de desplazamiento sea más precisa. (esta utilidad se le coloca a cada elemento)
11
12
13
14
15
21
22
23
24
25
31
32
33
34
35
41
42
43
44
45
51
52
53
54
55