Merge ad50da2181 into fa81d697fe

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `@tailwindcss/turbopack` package to run Tailwind CSS with Next.js ([20367](https://github.com/tailwindlabs/tailwindcss/pull/20367))
+- Add `interpolate-size` utilities (`interpolate-size-allow`, `interpolate-size-numeric`) for CSS keyword animation support ([#20518](https://github.com/tailwindlabs/tailwindcss/pull/20518))
 
 ### Fixed
 

packages/tailwindcss/src/property-order.ts

@@ -52,6 +52,7 @@ export default [
   'display',
 
   'field-sizing',
+  'interpolate-size',
   'aspect-ratio',
   'height',
   'max-height',

packages/tailwindcss/src/utilities.test.ts

@@ -3266,6 +3266,23 @@ test('field-sizing', async () => {
   ).toEqual('')
 })
 
+test('interpolate-size', async () => {
+  expect(await run(['interpolate-size-allow', 'interpolate-size-numeric'])).toMatchInlineSnapshot(`
+    "
+    .interpolate-size-allow {
+      interpolate-size: allow-keywords;
+    }
+
+    .interpolate-size-numeric {
+      interpolate-size: numeric-only;
+    }
+    "
+  `)
+  expect(
+    await run(['interpolate-size-[other]', '-interpolate-size-allow', '-interpolate-size-numeric']),
+  ).toEqual('')
+})
+
 test('aspect-ratio', async () => {
   expect(
     await run(

packages/tailwindcss/src/utilities.ts

@@ -989,6 +989,12 @@ export function createUtilities(theme: Theme) {
   staticUtility('field-sizing-content', [['field-sizing', 'content']])
   staticUtility('field-sizing-fixed', [['field-sizing', 'fixed']])
 
+  /**
+   * @css `interpolate-size`
+   */
+  staticUtility('interpolate-size-allow', [['interpolate-size', 'allow-keywords']])
+  staticUtility('interpolate-size-numeric', [['interpolate-size', 'numeric-only']])
+
   /**
    * @css `aspect-ratio`
    */