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

Author: lukewarlow

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet
+### Added
+
+- Add utilities for the `scrollbar-width` CSS property ([#14183](https://github.com/tailwindlabs/tailwindcss/pull/14183))
 
 ## [4.0.0] - 2025-01-21
 ## [4.0.0-beta.10] - 2025-01-21

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

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

packages/tailwindcss/src/utilities.test.ts

@@ -8673,6 +8673,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

@@ -1947,6 +1947,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'],