diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d7a1fcbe..6d41d6da9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901)) + ### Fixed - Handle `'` syntax in ClojureScript when extracting classes ([#18888](https://github.com/tailwindlabs/tailwindcss/pull/18888)) diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts new file mode 100644 index 000000000..5a262056c --- /dev/null +++ b/packages/tailwindcss/src/feature-flags.ts @@ -0,0 +1 @@ +export const enableContainerSizeUtility = process.env.FEATURES_ENV !== 'stable' diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index a7d3fd97c..32a01fda8 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -26214,16 +26214,16 @@ test('@container', async () => { '@container-normal', '@container/sidebar', '@container-normal/sidebar', - '@container-[size]', - '@container-[size]/sidebar', + '@container-size', + '@container-size/sidebar', ]), ).toMatchInlineSnapshot(` - ".\\@container-\\[size\\]\\/sidebar { - container: sidebar / size; + ".\\@container-normal\\/sidebar { + container: sidebar; } - .\\@container-normal\\/sidebar { - container: sidebar; + .\\@container-size\\/sidebar { + container: sidebar / size; } .\\@container\\/sidebar { @@ -26234,12 +26234,12 @@ test('@container', async () => { container-type: inline-size; } - .\\@container-\\[size\\] { - container-type: size; - } - .\\@container-normal { container-type: normal; + } + + .\\@container-size { + container-type: size; }" `) expect( @@ -26248,8 +26248,8 @@ test('@container', async () => { '-@container-normal', '-@container/sidebar', '-@container-normal/sidebar', - '-@container-[size]', - '-@container-[size]/sidebar', + '-@container-size', + '-@container-size/sidebar', ]), ).toEqual('') }) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 9a6906bbd..2cc1fe37e 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -12,6 +12,7 @@ import { } from './ast' import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate' import type { DesignSystem } from './design-system' +import { enableContainerSizeUtility } from './feature-flags' import type { Theme, ThemeKey } from './theme' import { compareBreakpoints } from './utils/compare-breakpoints' import { DefaultMap } from './utils/default-map' @@ -5712,6 +5713,12 @@ 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' + ) { + value = 'size' } if (value === null) return