Add field-sizing utilities (#14469)

This PR adds support for the [`field-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing) property which can be used to fit a text inputs, file inputs, textareas, and selects to the size of the text rather than some implicit default width. --------- Co-authored-by: Adam Wathan <[email protected]>
tailwindlabs · Sep 20, 2024 · fe2610e · fe2610e
1 parent 36fb123
commit fe2610e
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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`
    */