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'],