From e9c4fd07f94c9ba96dd95ce3048117e246ca98c8 Mon Sep 17 00:00:00 2001
From: Luke Warlow <projects@warlow.dev>
Date: Sat, 4 Sep 2021 13:18:52 +0100
Subject: [PATCH] Add scroll-behavior utilities

---
 src/plugins/index.js          |  1 +
 src/plugins/scrollBehavior.js | 11 +++++++++++
 tests/raw-content.test.css    |  3 +++
 tests/raw-content.test.html   |  1 +
 4 files changed, 16 insertions(+)
 create mode 100644 src/plugins/scrollBehavior.js

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 @@
     <div class="outline-none outline-black"></div>
     <div class="overflow-hidden"></div>
     <div class="overscroll-contain"></div>
+    <div class="scroll-smooth"></div>
     <div class="p-4 py-2 px-3 pt-1 pr-2 pb-3 pl-4"></div>
     <div class="place-content-start"></div>
     <div class="placeholder-green-300"></div>