From 966177d6fb54239d3848667cce1dfe517f82780e Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Tue, 13 Aug 2024 17:32:23 +0100
Subject: [PATCH] Add `scrollbar-none`, `scrollbar-thin`,
`scrollbar-width-auto` utilities
---
CHANGELOG.md | 4 ++-
.../__snapshots__/intellisense.test.ts.snap | 3 ++
packages/tailwindcss/src/utilities.test.ts | 29 +++++++++++++++++++
packages/tailwindcss/src/utilities.ts | 7 +++++
4 files changed, 42 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2cf05bf19e3e..5be11fefa889 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 3f95c9fafcb1..05c49c3f51b6 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/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",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 9ecf38882316..a7a0c1981e0e 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/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 {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 8de82f4cbbad..d056cf343174 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/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'],
+ () => styleRule('&::-webkit-scrollbar', [decl('display', 'none')]),
+ ])
+
staticUtility('truncate', [
['overflow', 'hidden'],
['text-overflow', 'ellipsis'],