Add scrollbar-none, scrollbar-thin, scrollbar-width-auto utilities

Author: lukewarlow

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -1611,6 +1611,9 @@ exports[`getClassList 1`] = `
   "scroll-py-3",
   "scroll-py-4",
   "scroll-smooth",
+  "scrollbar-none",
+  "scrollbar-thin",
+  "scrollbar-width-auto",
   "select-all",
   "select-auto",
   "select-none",

packages/tailwindcss/src/utilities.test.ts

@@ -7846,6 +7846,29 @@ test('scroll-behavior', async () => {
   ).toEqual('')
 })
 
+test('scrollbar-width', async () => {
+  expect(await run(['scrollbar-width-auto', 'scrollbar-thin', 'scrollbar-none'])).toMatchInlineSnapshot(`
+    ".scrollbar-none {
+      scrollbar-width: none;
+    }
+
+    .scrollbar-none::-webkit-scrollbar {
+      display: none;
+    }
+
+    .scrollbar-thin {
+      scrollbar-width: thin;
+    }
+    
+    .scrollbar-width-auto {
+      scrollbar-width: auto;
+    }"
+  `)
+  expect(
+    await run(['scrollbar-width-none', 'scrollbar-width-thin', '-scrollbar-none', 'scrollbar-none/foo']),
+  ).toEqual('')
+})
+
 test('truncate', async () => {
   expect(await run(['truncate'])).toMatchInlineSnapshot(`
     ".truncate {

packages/tailwindcss/src/utilities.ts

@@ -2100,6 +2100,15 @@ export function createUtilities(theme: Theme) {
   staticUtility('scroll-auto', [['scroll-behavior', 'auto']])
   staticUtility('scroll-smooth', [['scroll-behavior', 'smooth']])
 
+  staticUtility('scrollbar-width-auto', [['scrollbar-width', 'auto']])
+  staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']])
+  staticUtility('scrollbar-none', [
+    ['scrollbar-width', 'none'],
+    () => rule('&::-webkit-scrollbar', [
+      decl('display', 'none'),
+    ]),
+  ])
+
   staticUtility('truncate', [
     ['overflow', 'hidden'],
     ['text-overflow', 'ellipsis'],