Revert "Temporarily revert changes to `@utility"

This reverts commit 1aab04c.

Author: thecrypticace

CHANGELOG.md

@@ -19,6 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370))
 - _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128))
 - _Experimental_: Add `@source inline(…)` ([#17147](https://github.com/tailwindlabs/tailwindcss/pull/17147))
+- Add support for literal values in `--value('…')` and `--modifier('…')` ([#17304](https://github.com/tailwindlabs/tailwindcss/pull/17304))
+- Add suggestions when `--spacing(--value(integer, number))` is used ([#17308](https://github.com/tailwindlabs/tailwindcss/pull/17308))
 
 ### [4.0.15] - 2025-03-20
 

packages/tailwindcss/src/intellisense.test.ts

@@ -476,16 +476,31 @@ test('Custom functional @utility', async () => {
 
       --leading-foo: 1.5;
       --leading-bar: 2;
+
+      --spacing: 0.25rem;
+      --spacing-custom: 123px;
     }
 
     @utility tab-* {
-      tab-size: --value(--tab-size);
+      tab-size: --value(--tab-size, 'revert', 'initial');
     }
 
     @utility example-* {
       font-size: --value(--text);
       line-height: --value(--text- * --line-height);
-      line-height: --modifier(--leading);
+      line-height: --modifier(--leading, 'normal');
+    }
+
+    @utility with-custom-spacing-* {
+      size: --value(--spacing);
+    }
+
+    @utility with-integer-spacing-* {
+      size: --spacing(--value(integer));
+    }
+
+    @utility with-number-spacing-* {
+      size: --spacing(--value(number));
     }
 
     @utility -negative-* {
@@ -507,12 +522,32 @@ test('Custom functional @utility', async () => {
   expect(classNames).toContain('tab-2')
   expect(classNames).toContain('tab-4')
   expect(classNames).toContain('tab-github')
+  expect(classNames).toContain('tab-revert')
+  expect(classNames).toContain('tab-initial')
 
   expect(classNames).not.toContain('-tab-1')
   expect(classNames).not.toContain('-tab-2')
   expect(classNames).not.toContain('-tab-4')
   expect(classNames).not.toContain('-tab-github')
 
+  expect(classNames).toContain('with-custom-spacing-custom')
+  expect(classNames).not.toContain('with-custom-spacing-0')
+  expect(classNames).not.toContain('with-custom-spacing-0.5')
+  expect(classNames).not.toContain('with-custom-spacing-1')
+  expect(classNames).not.toContain('with-custom-spacing-1.5')
+
+  expect(classNames).not.toContain('with-integer-spacing-custom')
+  expect(classNames).toContain('with-integer-spacing-0')
+  expect(classNames).not.toContain('with-integer-spacing-0.5')
+  expect(classNames).toContain('with-integer-spacing-1')
+  expect(classNames).not.toContain('with-integer-spacing-1.5')
+
+  expect(classNames).not.toContain('with-number-spacing-custom')
+  expect(classNames).toContain('with-number-spacing-0')
+  expect(classNames).toContain('with-number-spacing-0.5')
+  expect(classNames).toContain('with-number-spacing-1')
+  expect(classNames).toContain('with-number-spacing-1.5')
+
   expect(classNames).toContain('-negative-1')
   expect(classNames).toContain('-negative-2')
   expect(classNames).toContain('-negative-4')
@@ -524,7 +559,7 @@ test('Custom functional @utility', async () => {
   expect(classNames).not.toContain('--negative-github')
 
   expect(classNames).toContain('example-xs')
-  expect(classMap.get('example-xs')?.modifiers).toEqual(['foo', 'bar'])
+  expect(classMap.get('example-xs')?.modifiers).toEqual(['normal', 'foo', 'bar'])
 })
 
 test('Theme keys with underscores are suggested with underscores', async () => {

packages/tailwindcss/src/utilities.test.ts

@@ -17256,6 +17256,23 @@ describe('custom utilities', () => {
       expect(await compileCss(input, ['tab-foo'])).toEqual('')
     })
 
+    test('resolve literal values', async () => {
+      let input = css`
+        @utility tab-* {
+          tab-size: --value('revert');
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await compileCss(input, ['tab-revert'])).toMatchInlineSnapshot(`
+        ".tab-revert {
+          tab-size: revert;
+        }"
+      `)
+      expect(await compileCss(input, ['tab-initial'])).toEqual('')
+    })
+
     test('resolving bare values with constraints for integer, percentage, and ratio', async () => {
       let input = css`
         @utility example-* {
@@ -17720,6 +17737,7 @@ describe('custom utilities', () => {
           --value: --value(--value, [length]);
           --modifier: --modifier(--modifier, [length]);
           --modifier-with-calc: calc(--modifier(--modifier, [length]) * 2);
+          --modifier-literals: --modifier('literal', 'literal-2');
         }
 
         @tailwind utilities;
@@ -17731,6 +17749,8 @@ describe('custom utilities', () => {
           'example-sm/7',
           'example-[12px]',
           'example-[12px]/[16px]',
+          'example-sm/literal',
+          'example-sm/literal-2',
         ]),
       ).toMatchInlineSnapshot(`
         ".example-\\[12px\\]\\/\\[16px\\] {
@@ -17745,6 +17765,16 @@ describe('custom utilities', () => {
           --modifier-with-calc: calc(var(--modifier-7, 28px) * 2);
         }
 
+        .example-sm\\/literal {
+          --value: var(--value-sm, 14px);
+          --modifier-literals: literal;
+        }
+
+        .example-sm\\/literal-2 {
+          --value: var(--value-sm, 14px);
+          --modifier-literals: literal-2;
+        }
+
         .example-\\[12px\\] {
           --value: 12px;
         }
@@ -17754,7 +17784,12 @@ describe('custom utilities', () => {
         }"
       `)
       expect(
-        await compileCss(input, ['example-foo', 'example-foo/[12px]', 'example-foo/12']),
+        await compileCss(input, [
+          'example-foo',
+          'example-foo/[12px]',
+          'example-foo/12',
+          'example-sm/unknown-literal',
+        ]),
       ).toEqual('')
     })