diff --git a/CHANGELOG.md b/CHANGELOG.md index 5cb3eb2e4b98..06cf8d4b4429 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,14 +9,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- _Experimental_: add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901)) -- _Experimental_: add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981), [#20019](https://github.com/tailwindlabs/tailwindcss/pull/20019)) -- Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996)) -- Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996)) -- Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989)) +## [4.3.0] - 2026-05-08 + +### Added + +- Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901)) +- Add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981), [#20019](https://github.com/tailwindlabs/tailwindcss/pull/20019)) - Add `scrollbar-gutter-*` utilities ([#20018](https://github.com/tailwindlabs/tailwindcss/pull/20018)) - Add `zoom-*` utilities ([#20020](https://github.com/tailwindlabs/tailwindcss/pull/20020)) - Add `tab-*` utilities ([#20022](https://github.com/tailwindlabs/tailwindcss/pull/20022)) +- Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996)) +- Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996)) +- Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989)) ### Fixed @@ -25,10 +29,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure CSS files containing `@variant` are processed by `@tailwindcss/vite` ([#19966](https://github.com/tailwindlabs/tailwindcss/pull/19966)) - Resolve imports relative to `base` when `result.opts.from` is not provided when using `@tailwindcss/postcss` ([#19980](https://github.com/tailwindlabs/tailwindcss/pull/19980)) - Canonicalization: preserve significant `_` whitespace in arbitrary values ([#19986](https://github.com/tailwindlabs/tailwindcss/pull/19986)) -- Canonicalization: add parentheses when removing whitespace from arbitrary values would hurt readability ([#19986](https://github.com/tailwindlabs/tailwindcss/pull/19986)) +- Canonicalization: add parentheses when removing whitespace from arbitrary values would hurt readability (e.g. `w-[calc(100%---spacing(60))]` → `w-[calc(100%-(--spacing(60)))]`) ([#19986](https://github.com/tailwindlabs/tailwindcss/pull/19986)) - Canonicalization: preserve the original unit in arbitrary values instead of normalizing to base units (e.g. `-mt-[20in]` → `mt-[-20in]`, not `mt-[-1920px]`) ([#19988](https://github.com/tailwindlabs/tailwindcss/pull/19988)) - Canonicalization: migrate arbitrary `:has()` variants from `[&:has(…)]` to `has-[…]` ([#19991](https://github.com/tailwindlabs/tailwindcss/pull/19991)) -- Upgrade: don’t migrate inline `style` attributes ([#19918](https://github.com/tailwindlabs/tailwindcss/pull/19918)) +- Upgrade: don’t migrate inline `style` attributes (e.g. `style="flex-grow: 1"` → `style="flex-grow: 1"`, not `style="grow: 1"`) ([#19918](https://github.com/tailwindlabs/tailwindcss/pull/19918)) - Allow multiple `@utility` definitions with the same name but different value types ([#19777](https://github.com/tailwindlabs/tailwindcss/pull/19777)) - Export missing `PluginWithConfig` type from `tailwindcss/plugin` to fix errors when inferring plugin config types ([#19707](https://github.com/tailwindlabs/tailwindcss/pull/19707)) - Ensure `start` and `end` legacy utilities without values do not generate CSS ([#20003](https://github.com/tailwindlabs/tailwindcss/pull/20003)) @@ -4017,7 +4021,8 @@ No release notes - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.4...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v4.3.0...HEAD +[4.3.0]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.4...v4.3.0 [4.2.4]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.3...v4.2.4 [4.2.3]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.2...v4.2.3 [4.2.2]: https://github.com/tailwindlabs/tailwindcss/compare/v4.2.1...v4.2.2 diff --git a/crates/node/npm/android-arm-eabi/package.json b/crates/node/npm/android-arm-eabi/package.json index e21c4d4e20d2..d4521587e2e2 100644 --- a/crates/node/npm/android-arm-eabi/package.json +++ b/crates/node/npm/android-arm-eabi/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-android-arm-eabi", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/android-arm64/package.json b/crates/node/npm/android-arm64/package.json index 4a461e706b47..3119b4e2ade5 100644 --- a/crates/node/npm/android-arm64/package.json +++ b/crates/node/npm/android-arm64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-android-arm64", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/darwin-arm64/package.json b/crates/node/npm/darwin-arm64/package.json index bb2f1290d503..ee07061e521c 100644 --- a/crates/node/npm/darwin-arm64/package.json +++ b/crates/node/npm/darwin-arm64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-darwin-arm64", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/darwin-x64/package.json b/crates/node/npm/darwin-x64/package.json index 427d76099868..bc4771011dd9 100644 --- a/crates/node/npm/darwin-x64/package.json +++ b/crates/node/npm/darwin-x64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-darwin-x64", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/freebsd-x64/package.json b/crates/node/npm/freebsd-x64/package.json index 04c0189c03c4..48a8fc382a3b 100644 --- a/crates/node/npm/freebsd-x64/package.json +++ b/crates/node/npm/freebsd-x64/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-freebsd-x64", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-arm-gnueabihf/package.json b/crates/node/npm/linux-arm-gnueabihf/package.json index aa7a8d757689..50ccb792de56 100644 --- a/crates/node/npm/linux-arm-gnueabihf/package.json +++ b/crates/node/npm/linux-arm-gnueabihf/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-arm-gnueabihf", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-arm64-gnu/package.json b/crates/node/npm/linux-arm64-gnu/package.json index c14b08139537..e023fb35cb52 100644 --- a/crates/node/npm/linux-arm64-gnu/package.json +++ b/crates/node/npm/linux-arm64-gnu/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-arm64-gnu", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-arm64-musl/package.json b/crates/node/npm/linux-arm64-musl/package.json index 99e2a96032e7..7c034a531ac5 100644 --- a/crates/node/npm/linux-arm64-musl/package.json +++ b/crates/node/npm/linux-arm64-musl/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-arm64-musl", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-x64-gnu/package.json b/crates/node/npm/linux-x64-gnu/package.json index 8d0eddaa7bb4..268087c77651 100644 --- a/crates/node/npm/linux-x64-gnu/package.json +++ b/crates/node/npm/linux-x64-gnu/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-x64-gnu", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/linux-x64-musl/package.json b/crates/node/npm/linux-x64-musl/package.json index b0e9a73e0773..45d5ad140ee9 100644 --- a/crates/node/npm/linux-x64-musl/package.json +++ b/crates/node/npm/linux-x64-musl/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-linux-x64-musl", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/wasm32-wasi/package.json b/crates/node/npm/wasm32-wasi/package.json index 103e89e6b026..f15d89469ecc 100644 --- a/crates/node/npm/wasm32-wasi/package.json +++ b/crates/node/npm/wasm32-wasi/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-wasm32-wasi", - "version": "4.2.4", + "version": "4.3.0", "cpu": [ "wasm32" ], diff --git a/crates/node/npm/win32-arm64-msvc/package.json b/crates/node/npm/win32-arm64-msvc/package.json index c2893ffbf9ac..9e831d1aa030 100644 --- a/crates/node/npm/win32-arm64-msvc/package.json +++ b/crates/node/npm/win32-arm64-msvc/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-win32-arm64-msvc", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/npm/win32-x64-msvc/package.json b/crates/node/npm/win32-x64-msvc/package.json index 9a8a2397d81c..2109a0972532 100644 --- a/crates/node/npm/win32-x64-msvc/package.json +++ b/crates/node/npm/win32-x64-msvc/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide-win32-x64-msvc", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/crates/node/package.json b/crates/node/package.json index e2c5cf441c67..c07eb5e17090 100644 --- a/crates/node/package.json +++ b/crates/node/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/oxide", - "version": "4.2.4", + "version": "4.3.0", "repository": { "type": "git", "url": "git+https://github.com/tailwindlabs/tailwindcss.git", diff --git a/integrations/vite/resolvers.test.ts b/integrations/vite/resolvers.test.ts index 416737960eb1..a96b26ed18e6 100644 --- a/integrations/vite/resolvers.test.ts +++ b/integrations/vite/resolvers.test.ts @@ -571,8 +571,9 @@ test( async ({ exec, fs, expect }) => { await exec('pnpm vite build') - expect((await fs.dumpFiles('./dist/**/*.css')).replace(/-([a-zA-Z0-9]*?)\.css/g, '-.css')) - .toMatchInlineSnapshot(` + expect( + (await fs.dumpFiles('./dist/**/*.css')).replace(/-([_a-zA-Z0-9]*?)\.css/g, '-.css'), + ).toMatchInlineSnapshot(` " --- ./dist/assets/index-.css --- .do-include-me { @@ -641,8 +642,9 @@ test( async ({ exec, fs, expect }) => { await exec('pnpm vite build') - expect((await fs.dumpFiles('./dist/**/*.css')).replace(/-([a-zA-Z0-9]*?)\.css/g, '-.css')) - .toMatchInlineSnapshot(` + expect( + (await fs.dumpFiles('./dist/**/*.css')).replace(/-([_a-zA-Z0-9]*?)\.css/g, '-.css'), + ).toMatchInlineSnapshot(` " --- ./dist/assets/index-.css --- @layer base { diff --git a/packages/@tailwindcss-browser/package.json b/packages/@tailwindcss-browser/package.json index bfc2d80bf0a8..eff2495c19b2 100644 --- a/packages/@tailwindcss-browser/package.json +++ b/packages/@tailwindcss-browser/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/browser", - "version": "4.2.4", + "version": "4.3.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "./dist/index.global.js", diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json index 9935cb2da41e..09ff884d576b 100644 --- a/packages/@tailwindcss-cli/package.json +++ b/packages/@tailwindcss-cli/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/cli", - "version": "4.2.4", + "version": "4.3.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-node/package.json b/packages/@tailwindcss-node/package.json index 80335b8943ba..be7fc7a40bd2 100644 --- a/packages/@tailwindcss-node/package.json +++ b/packages/@tailwindcss-node/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/node", - "version": "4.2.4", + "version": "4.3.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json index 50ee2089300b..56035765b9a0 100644 --- a/packages/@tailwindcss-postcss/package.json +++ b/packages/@tailwindcss-postcss/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/postcss", - "version": "4.2.4", + "version": "4.3.0", "description": "PostCSS plugin for Tailwind CSS, a utility-first CSS framework for rapidly building custom user interfaces", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-standalone/package.json b/packages/@tailwindcss-standalone/package.json index bf1396880e58..4af517e593d3 100644 --- a/packages/@tailwindcss-standalone/package.json +++ b/packages/@tailwindcss-standalone/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/standalone", - "version": "4.2.4", + "version": "4.3.0", "private": true, "description": "Standalone CLI for Tailwind CSS", "license": "MIT", diff --git a/packages/@tailwindcss-upgrade/package.json b/packages/@tailwindcss-upgrade/package.json index d617817f77ca..2daccef2a4f1 100644 --- a/packages/@tailwindcss-upgrade/package.json +++ b/packages/@tailwindcss-upgrade/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/upgrade", - "version": "4.2.4", + "version": "4.3.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json index 93644d9f93f3..6617406f7828 100644 --- a/packages/@tailwindcss-vite/package.json +++ b/packages/@tailwindcss-vite/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/vite", - "version": "4.2.4", + "version": "4.3.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/@tailwindcss-webpack/package.json b/packages/@tailwindcss-webpack/package.json index 5228e429c95d..bb07ad3e3aaf 100644 --- a/packages/@tailwindcss-webpack/package.json +++ b/packages/@tailwindcss-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/webpack", - "version": "4.2.4", + "version": "4.3.0", "description": "A webpack loader for Tailwind CSS v4.", "license": "MIT", "repository": { diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index 47bfbbed6633..53397482688a 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "4.2.4", + "version": "4.3.0", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "repository": { diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts index 2441c03d81e9..e69de29bb2d1 100644 --- a/packages/tailwindcss/src/feature-flags.ts +++ b/packages/tailwindcss/src/feature-flags.ts @@ -1,2 +0,0 @@ -export const enableContainerSizeUtility = process.env.FEATURES_ENV !== 'stable' -export const enableScrollbarUtilities = process.env.FEATURES_ENV !== 'stable' diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 78997b4336d1..9c5a5b92de67 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -11503,7 +11503,6 @@ test('scrollbar-thumb', async () => { css` @theme { --color-red-500: #ef4444; - --scrollbar-thumb-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -11511,7 +11510,6 @@ test('scrollbar-thumb', async () => { 'scrollbar-thumb-red-500', 'scrollbar-thumb-red-500/50', 'scrollbar-thumb-red-500/[0.5]', - 'scrollbar-thumb-blue-500', 'scrollbar-thumb-current', 'scrollbar-thumb-inherit', 'scrollbar-thumb-transparent', @@ -11532,7 +11530,6 @@ test('scrollbar-thumb', async () => { :root, :host { --color-red-500: #ef4444; - --scrollbar-thumb-color-blue-500: #3b82f6; } .scrollbar-thumb-\\[\\#0088cc\\] { @@ -11545,11 +11542,6 @@ test('scrollbar-thumb', async () => { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-thumb-blue-500 { - --tw-scrollbar-thumb: var(--scrollbar-thumb-color-blue-500); - scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); - } - .scrollbar-thumb-current { --tw-scrollbar-thumb: currentcolor; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); @@ -11628,7 +11620,6 @@ test('scrollbar-track', async () => { css` @theme { --color-red-500: #ef4444; - --scrollbar-track-color-blue-500: #3b82f6; } @tailwind utilities; `, @@ -11636,7 +11627,6 @@ test('scrollbar-track', async () => { 'scrollbar-track-red-500', 'scrollbar-track-red-500/50', 'scrollbar-track-red-500/[0.5]', - 'scrollbar-track-blue-500', 'scrollbar-track-current', 'scrollbar-track-inherit', 'scrollbar-track-transparent', @@ -11657,7 +11647,6 @@ test('scrollbar-track', async () => { :root, :host { --color-red-500: #ef4444; - --scrollbar-track-color-blue-500: #3b82f6; } .scrollbar-track-\\[\\#0088cc\\] { @@ -11670,11 +11659,6 @@ test('scrollbar-track', async () => { scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); } - .scrollbar-track-blue-500 { - --tw-scrollbar-track: var(--scrollbar-track-color-blue-500); - scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); - } - .scrollbar-track-current { --tw-scrollbar-track: currentcolor; scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track); @@ -11866,18 +11850,7 @@ test('whitespace', async () => { }) test('tab', async () => { - expect( - await compileCss( - css` - @theme { - --tab-size-github: 8; - } - - @tailwind utilities; - `, - ['tab-2', 'tab-8', 'tab-[12px]', 'tab-[3]'], - ), - ).toMatchInlineSnapshot(` + expect(await run(['tab-2', 'tab-8', 'tab-[12px]', 'tab-[3]'])).toMatchInlineSnapshot(` " .tab-2 { tab-size: 2; diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 9c9693adae0a..724449ca9566 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -12,7 +12,6 @@ import { } from './ast' import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate' import type { DesignSystem } from './design-system' -import { enableContainerSizeUtility, enableScrollbarUtilities } from './feature-flags' import type { Theme, ThemeKey } from './theme' import { compareBreakpoints } from './utils/compare-breakpoints' import { DefaultMap } from './utils/default-map' @@ -2228,43 +2227,41 @@ export function createUtilities(theme: Theme) { staticUtility('scroll-auto', [['scroll-behavior', 'auto']]) staticUtility('scroll-smooth', [['scroll-behavior', 'smooth']]) - if (enableScrollbarUtilities) { - staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']]) - staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']]) - staticUtility('scrollbar-none', [['scrollbar-width', 'none']]) + staticUtility('scrollbar-auto', [['scrollbar-width', 'auto']]) + staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']]) + staticUtility('scrollbar-none', [['scrollbar-width', 'none']]) - staticUtility('scrollbar-gutter-auto', [['scrollbar-gutter', 'auto']]) - staticUtility('scrollbar-gutter-stable', [['scrollbar-gutter', 'stable']]) - staticUtility('scrollbar-gutter-both', [['scrollbar-gutter', 'stable both-edges']]) - - { - let scrollbarColorProperties = () => { - return atRoot([ - property('--tw-scrollbar-thumb', '#0000', ''), - property('--tw-scrollbar-track', '#0000', ''), - ]) - } + { + let scrollbarColorProperties = () => { + return atRoot([ + property('--tw-scrollbar-thumb', '#0000', ''), + property('--tw-scrollbar-track', '#0000', ''), + ]) + } - colorUtility('scrollbar-thumb', { - themeKeys: ['--scrollbar-thumb-color', '--color'], - handle: (value) => [ - scrollbarColorProperties(), - decl('--tw-scrollbar-thumb', value), - decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), - ], - }) + colorUtility('scrollbar-thumb', { + themeKeys: ['--color'], + handle: (value) => [ + scrollbarColorProperties(), + decl('--tw-scrollbar-thumb', value), + decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), + ], + }) - colorUtility('scrollbar-track', { - themeKeys: ['--scrollbar-track-color', '--color'], - handle: (value) => [ - scrollbarColorProperties(), - decl('--tw-scrollbar-track', value), - decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), - ], - }) - } + colorUtility('scrollbar-track', { + themeKeys: ['--color'], + handle: (value) => [ + scrollbarColorProperties(), + decl('--tw-scrollbar-track', value), + decl('scrollbar-color', 'var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)'), + ], + }) } + staticUtility('scrollbar-gutter-auto', [['scrollbar-gutter', 'auto']]) + staticUtility('scrollbar-gutter-stable', [['scrollbar-gutter', 'stable']]) + staticUtility('scrollbar-gutter-both', [['scrollbar-gutter', 'stable both-edges']]) + staticUtility('truncate', [ ['overflow', 'hidden'], ['text-overflow', 'ellipsis'], @@ -5969,11 +5966,7 @@ export function createUtilities(theme: Theme) { value = candidate.value.value } else if (candidate.value.kind === 'named' && candidate.value.value === 'normal') { value = 'normal' - } else if ( - enableContainerSizeUtility && - candidate.value.kind === 'named' && - candidate.value.value === 'size' - ) { + } else if (candidate.value.kind === 'named' && candidate.value.value === 'size') { value = 'size' }