From 05664dd3a2d744dc75207909067dca5cfc195f41 Mon Sep 17 00:00:00 2001
From: Luke Warlow <projects@warlow.dev>
Date: Thu, 7 Oct 2021 16:40:14 +0100
Subject: [PATCH] Add utilities for scrollbar-width

---
 src/corePlugins.js          | 13 +++++++++++++
 tests/raw-content.test.css  |  9 +++++++++
 tests/raw-content.test.html |  2 ++
 3 files changed, 24 insertions(+)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index d32038d56cfc..b53fee6db575 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1272,6 +1272,19 @@ export let corePlugins = {
     })
   },
 
+  scrollbarWidth: ({ addUtilities }) => {
+    addUtilities({
+      '.scrollbar-auto': { 'scrollbar-width': 'auto' },
+      '.scrollbar-thin': { 'scrollbar-width': 'thin' },
+      '.scrollbar-none': {
+        'scrollbar-width': 'none',
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
+      },
+    })
+  },
+
   textOverflow: ({ addUtilities }) => {
     addUtilities({
       '.truncate': { overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' },
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
index 75ea33b87906..083f815e2852 100644
--- a/tests/raw-content.test.css
+++ b/tests/raw-content.test.css
@@ -367,6 +367,15 @@
 .scroll-smooth {
   scroll-behavior: smooth;
 }
+.scrollbar-thin {
+  scrollbar-width: thin;
+}
+.scrollbar-none {
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/tests/raw-content.test.html b/tests/raw-content.test.html
index 2cb65ed46810..b91bcef030f7 100644
--- a/tests/raw-content.test.html
+++ b/tests/raw-content.test.html
@@ -97,6 +97,8 @@
     <div class="overflow-hidden"></div>
     <div class="overscroll-contain"></div>
     <div class="scroll-smooth"></div>
+    <div class="scrollbar-thin"></div>
+    <div class="scrollbar-none"></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>