8000 Add `scroll-snap` utilities (#5637) · tailwindlabs/tailwindcss@753d3f1 · GitHub
Skip to content

Commit 753d3f1

Browse files
reininkadamwathan95jonpetinnocenzi
authored
Add scroll-snap utilities (#5637)
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Co-authored-by: Peter Jonsson <4572231+95jonpet@users.noreply.github.com> Co-authored-by: Enzo Innocenzi <enzo@innocenzi.dev>
1 parent 484acb3 commit 753d3f1

File tree

6 files changed

+168
-0
lines changed

6 files changed

+168
-0
lines changed

‎src/corePlugins.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -813,6 +813,76 @@ export default {
813813
})
814814
},
815815

816+
scrollSnapType: ({ addUtilities, addBase }) => {
817+
addBase({
818+
'@defaults scroll-snap-type': {
819+
'--tw-scroll-snap-strictness': 'proximity',
820+
},
821+
})
822+
823+
addUtilities({
824+
'.snap-none': { 'scroll-snap-type': 'none' },
825+
'.snap-x': {
826+
'@defaults scroll-snap-type': {},
827+
'scroll-snap-type': 'x var(--tw-scroll-snap-strictness)',
828+
},
829+
'.snap-y': {
830+
'@defaults scroll-snap-type': {},
831+
'scroll-snap-type': 'y var(--tw-scroll-snap-strictness)',
832+
},
833+
'.snap-both': {
834+
'@defaults scroll-snap-type': {},
835+
'scroll-snap-type': 'both var(--tw-scroll-snap-strictness)',
836+
},
837+
'.snap-mandatory': { '--tw-scroll-snap-strictness': 'mandatory' },
838+
'.snap-proximity': { '--tw-scroll-snap-strictness': 'proximity' },
839+
})
840+
},
841+
842+
scrollSnapAlign: ({ addUtilities }) => {
843+
addUtilities({
844+
'.snap-start': { 'scroll-snap-align': 'start' },
845+
'.snap-end': { 'scroll-snap-align': 'end' },
846+
'.snap-center': { 'scroll-snap-align': 'center' },
847+
'.snap-align-none': { 'scroll-snap-align': 'none' },
848+
})
849+
},
850+
851+
scrollSnapStop: ({ addUtilities }) => {
852+
addUtilities({
853+
'.snap-normal': { 'scroll-snap-stop': 'normal' },
854+
'.snap-always': { 'scroll-snap-stop': 'always' },
855+
})
856+
},
857+
858+
scrollMargin: createUtilityPlugin('scrollMargin', [
859+
['scroll-m', ['scroll-margin']],
860+
[
861+
['scroll-mx', ['scroll-margin-left', 'scroll-margin-right']],
862+
['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
863+
],
864+
[
865+
['scroll-mt', ['scroll-margin-top']],
866+
['scroll-mr', ['scroll-margin-right']],
867+
['scroll-mb', ['scroll-margin-bottom']],
868+
['scroll-ml', ['scroll-margin-left']],
869+
],
870+
]),
871+
872+
scrollPadding: createUtilityPlugin('scrollPadding', [
873+
['scroll-p', ['scroll-padding']],
874+
[
875+
['scroll-px', ['scroll-padding-left', 'scroll-padding-right']],
876+
['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']],
877+
],
878+
[
879+
['scroll-pt', ['scroll-padding-top']],
880+
['scroll-pr', ['scroll-padding-right']],
881+
['scroll-pb', ['scroll-padding-bottom']],
882+
['scroll-pl', ['scroll-padding-left']],
883+
],
884+
]),
885+
816886
listStylePosition: ({ addUtilities }) => {
817887
addUtilities({
818888
'.list-inside': { 'list-style-position': 'inside' },

‎stubs/defaultConfig.stub.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -711,6 +711,11 @@ module.exports = {
711711
125: '1.25',
712712
150: '1.5',
713713
},
714+
scrollMargin: (theme, { negative }) => ({
715+
...theme('spacing'),
716+
...negative(theme('spacing')),
717+
}),
718+
scrollPadding: (theme) => theme('spacing'),
714719
sepia: {
715720
0: '0',
716721
DEFAULT: '100%',

‎tests/arbitrary-values.test.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,58 @@
307307
.cursor-\[var\(--value\)\] {
308308
cursor: var(--value);
309309
}
310+
.scroll-m-\[7px\] {
311+
scroll-margin: 7px;
312+
}
313+
.scroll-mx-\[7px\] {
314+
scroll-margin-left: 7px;
315+
scroll-margin-right: 7px;
316+
}
317+
.scroll-my-\[7px\] {
318+
scroll-margin-top: 7px;
319+
scroll-margin-bottom: 7px;
320+
}
321+
.scroll-mt-\[7px\] {
322+
scroll-margin-top: 7px;
323+
}
324+
.scroll-mr-\[7px\] {
325+
scroll-margin-right: 7px;
326+
}
327+
.scroll-mb-\[7px\] {
328+
scroll-margin-bottom: 7px;
329+
}
330+
.scroll-ml-\[7px\] {
331+
scroll-margin-left: 7px;
332+
}
333+
.scroll-mt-\[var\(--scroll-margin\)\] {
334+
scroll-margin-top: var(--scroll-margin);
335+
}
336+
.scroll-p-\[7px\] {
337+
scroll-padding: 7px;
338+
}
339+
.scroll-px-\[7px\] {
340+
scroll-padding-left: 7px;
341+
scroll-padding-right: 7px;
342+
}
343+
.scroll-py-\[7px\] {
344+
scroll-padding-top: 7px;
345+
scroll-padding-bottom: 7px;
346+
}
347+
.scroll-pt-\[7px\] {
348+
scroll-padding-top: 7px;
349+
}
350+
.scroll-pr-\[7px\] {
351+
scroll-padding-right: 7px;
352+
}
353+
.scroll-pb-\[7px\] {
354+
scroll-padding-bottom: 7px;
355+
}
356+
.scroll-pl-\[7px\] {
357+
scroll-padding-left: 7px;
358+
}
359+
.scroll-pt-\[var\(--scroll-padding\)\] {
360+
scroll-padding-top: var(--scroll-padding);
361+
}
310362
.list-\[\'\\1f44d\'\] {
311363
list-style-type: '\1F44D';
312364
}

‎tests/arbitrary-values.test.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,24 @@
103103
<div class="animate-[pong_1s_cubic-bezier(0,0,0.2,1)_infinite]"></div>
104104
<div class="animate-[var(--value)]"> 6329 ;</div>
105105

106+
<div class="scroll-m-[7px]"></div>
107+
<div class="scroll-mx-[7px]"></div>
108+
<div class="scroll-my-[7px]"></div>
109+
<div class="scroll-mt-[7px]"></div>
110+
<div class="scroll-mr-[7px]"></div>
111+
<div class="scroll-mb-[7px]"></div>
112+
<div class="scroll-ml-[7px]"></div>
113+
<div class="scroll-mt-[var(--scroll-margin)]"></div>
114+
115+
<div class="scroll-p-[7px]"></div>
116+
<div class="scroll-px-[7px]"></div>
117+
<div class="scroll-py-[7px]"></div>
118+
<div class="scroll-pt-[7px]"></div>
119+
<div class="scroll-pr-[7px]"></div>
120+
<div class="scroll-pb-[7px]"></div>
121+
<div class="scroll-pl-[7px]"></div>
122+
<div class="scroll-pt-[var(--scroll-padding)]"></div>
123+
106124
<div class="cursor-[pointer]"></div>
107125
<div class="cursor-[url(hand.cur)_2_2,pointer]"></div>
108126
<div class="cursor-[var(--value)]"></div>

‎tests/basic-usage.test.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
1212
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
1313
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
14+
--tw-scroll-snap-strictness: proximity;
1415
--tw-border-opacity: 1;
1516
border-color: rgb(229 231 235 / var(--tw-border-opacity));
1617
--tw-ring-offset-shadow: 0 0 #0000;
@@ -311,6 +312,24 @@
311312
.resize-none {
312313
resize: none;
313314
}
315+
.snap-x {
316+
scroll-snap-type: x var(--tw-scroll-snap-strictness);
317+
}
318+
.snap-mandatory {
319+
--tw-scroll-snap-strictness: mandatory;
320+
}
321+
.snap-center {
322+
scroll-snap-align: center;
323+
}
324+
.snap-always {
325+
scroll-snap-stop: always;
326+
}
327+
.scroll-mt-6 {
328+
scroll-margin-top: 1.5rem;
329+
}
330+
.scroll-p-6 {
331+
scroll-padding: 1.5rem;
332+
}
314333
.list-inside {
315334
list-style-position: inside;
316335
}

‎tests/basic-usage.test.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,10 @@
110110
<div class="pointer-events-none"></div>
111111
<div class="absolute"></div>
112112
<div class="resize-none"></div>
113+
<div class="snap-x snap-mandatory"></div>
114+
<div class="snap-center snap-always"></div>
115+
<div class="scroll-mt-6"></div>
116+
<div class="scroll-p-6"></div>
113117
<div class="ring-white"></div>
114118
<div class="ring-offset-blue-300"></div>
115119
<div class="ring-offset-2"></div>

0 commit comments

Comments
 (0)