diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d6d17aac8fc..05ed30e84bfc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Support `screens` in JS config files ([#14415](https://github.com/tailwindlabs/tailwindcss/pull/14415)) - Add `bg-radial-*` and `bg-conic-*` utilities for radial and conic gradients ([#14467](https://github.com/tailwindlabs/tailwindcss/pull/14467)) - Add new `shadow-initial` and `inset-shadow-initial` utilities for resetting shadow colors ([#14468](https://github.com/tailwindlabs/tailwindcss/pull/14468)) +- Add `field-sizing-*` utilities ([#14469](https://github.com/tailwindlabs/tailwindcss/pull/14469)) ### Fixed diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 1b6fc55c53c4..8ae6e5dcb607 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -1914,6 +1914,8 @@ exports[`getClassList 1`] = ` "end-4", "end-auto", "end-full", + "field-sizing-content", + "field-sizing-fixed", "fill-current", "fill-current/0", "fill-current/5", diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts index b45baca1475b..e28eadc73a20 100644 --- a/packages/tailwindcss/src/property-order.ts +++ b/packages/tailwindcss/src/property-order.ts @@ -42,8 +42,9 @@ export default [ 'box-sizing', 'display', - 'aspect-ratio', + 'field-sizing', + 'aspect-ratio', 'height', 'max-height', 'min-height', diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 72defb4c7213..a55d27e17337 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1873,6 +1873,21 @@ test('display', async () => { ).toEqual('') }) +test('field-sizing', async () => { + expect(await run(['field-sizing-content', 'field-sizing-fixed'])).toMatchInlineSnapshot(` + ".field-sizing-content { + field-sizing: content; + } + + .field-sizing-fixed { + field-sizing: fixed; + }" + `) + expect( + await run(['field-sizing-[other]', '-field-sizing-content', '-field-sizing-fixed']), + ).toEqual('') +}) + test('aspect-ratio', async () => { expect(await run(['aspect-video', 'aspect-[10/9]', 'aspect-4/3'])).toMatchInlineSnapshot(` ".aspect-4\\/3 { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index bc2c76ba2337..5b7b2f765e59 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -882,6 +882,12 @@ export function createUtilities(theme: Theme) { staticUtility('contents', [['display', 'contents']]) staticUtility('list-item', [['display', 'list-item']]) + /** + * @css `field-sizing` + */ + staticUtility('field-sizing-content', [['field-sizing', 'content']]) + staticUtility('field-sizing-fixed', [['field-sizing', 'fixed']]) + /** * @css `aspect-ratio` */