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

Author: lukewarlow

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add support for `addBase` plugins using the `@plugin` directive ([#14172](https://github.com/tailwindlabs/tailwindcss/pull/14172))
 - Add support for the `tailwindcss/plugin` export ([#14173](https://github.com/tailwindlabs/tailwindcss/pull/14173))
+- Add utilities for the `scrollbar-width` CSS property ([#14183](https://github.com/tailwindlabs/tailwindcss/pull/14183))
 
 ## [4.0.0-alpha.19] - 2024-08-09
 

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,35 @@ 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,13 @@ 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'],