diff --git a/src/plugins/index.js b/src/plugins/index.js index 72fbf41b3b52..3a5998ef1ef5 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -77,6 +77,7 @@ export { default as justifySelf } from './justifySelf' export { default as overflow } from './overflow' export { default as overscrollBehavior } from './overscrollBehavior' +export { default as scrollBehavior } from './scrollBehavior' export { default as textOverflow } from './textOverflow' export { default as whitespace } from './whitespace' export { default as wordBreak } from './wordBreak' diff --git a/src/plugins/scrollBehavior.js b/src/plugins/scrollBehavior.js new file mode 100644 index 000000000000..652581d33fbf --- /dev/null +++ b/src/plugins/scrollBehavior.js @@ -0,0 +1,11 @@ +export default function () { + return function ({ addUtilities, variants }) { + addUtilities( + { + '.scroll-auto': { 'scroll-behavior': 'auto' }, + '.scroll-smooth': { 'scroll-behavior': 'smooth' }, + }, + variants('scrollBehavior') + ) + } +} diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index 771694661428..346ba8b32faf 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -364,6 +364,9 @@ .overscroll-contain { overscroll-behavior: contain; } +.scroll-smooth { + scroll-behavior: smooth; +} .truncate { overflow: hidden; text-overflow: ellipsis; diff --git a/tests/raw-content.test.html b/tests/raw-content.test.html index 1e97f5fdf4ce..2cb65ed46810 100644 --- a/tests/raw-content.test.html +++ b/tests/raw-content.test.html @@ -96,6 +96,7 @@
+