Show warning when using unsupported bare value data type

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Show warning when using unsupported bare value data type in `--value(…)` ([#17464](https://github.com/tailwindlabs/tailwindcss/pull/17464))
 
 ## [4.1.2] - 2025-04-03
 

packages/tailwindcss/src/utilities.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import { compile } from '.'
 import { compileCss, optimizeCss, run } from './test-utils/run'
 
@@ -26530,6 +26530,34 @@ describe('custom utilities', () => {
       expect(await compileCss(input, ['tab-foo'])).toEqual('')
     })
 
+    test('bare values with unsupported data types should result in a warning', async () => {
+      let spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      let input = css`
+        @utility paint-* {
+          paint: --value([color], color);
+        }
+
+        @tailwind utilities;
+      `
+
+      expect(await compileCss(input, ['paint-#0088cc', 'paint-red'])).toMatchInlineSnapshot(`""`)
+      expect(spy.mock.calls).toMatchInlineSnapshot(`
+        [
+          [
+            "Unsupported bare value data type: "color".
+        Only valid data types are: "number", "integer", "ratio", "percentage".
+        ",
+          ],
+          [
+            "\`\`\`css
+        --value([color],color)
+                        ^^^^^
+        \`\`\`",
+          ],
+        ]
+      `)
+    })
+
     test('resolve literal values', async () => {
       let input = css`
         @utility tab-* {

packages/tailwindcss/src/utilities.ts

@@ -5692,6 +5692,16 @@ export function createUtilities(theme: Theme) {
   return utilities
 }
 
+// Only allowed bare value data types, to prevent creating new syntax that we
+// typically don't support right now. E.g.: `--value(color)` would allow you to
+// use `text-#0088cc` as a valid utility, which is not what we want.
+export const BARE_VALUE_DATA_TYPES = [
+  'number', // 2.5
+  'integer', // 8
+  'ratio', // 2/3
+  'percentage', // 25%
+]
+
 export function createCssUtility(node: AtRule) {
   let name = node.params
 
@@ -5824,7 +5834,6 @@ export function createCssUtility(node: AtRule) {
           }
           fn.nodes = ValueParser.parse(args.join(','))
 
-          // Track information for suggestions
           for (let node of fn.nodes) {
             // Track literal values
             if (
@@ -5841,6 +5850,36 @@ export function createCssUtility(node: AtRule) {
               let value = node.value.replace(/-\*.*$/g, '') as `--${string}`
               storage[fn.value].themeKeys.add(value)
             }
+
+            // Validate bare value data types
+            else if (
+              node.kind === 'word' &&
+              !(node.value[0] === '[' && node.value[node.value.length - 1] === ']') && // Ignore arbitrary values
+              !BARE_VALUE_DATA_TYPES.includes(node.value)
+            ) {
+              console.warn(
+                `Unsupported bare value data type: "${node.value}".\nOnly valid data types are: ${BARE_VALUE_DATA_TYPES.map((x) => `"${x}"`).join(', ')}.\n`,
+              )
+              // TODO: Once we properly track the location of the node, we can
+              //       clean this up in a better way.
+              let dataType = node.value
+              let copy = structuredClone(fn)
+              let sentinelValue = '¶'
+              ValueParser.walk(copy.nodes, (node, { replaceWith }) => {
+                if (node.kind === 'word' && node.value === dataType) {
+                  replaceWith({ kind: 'word', value: sentinelValue })
+                }
+              })
+              let underline = '^'.repeat(ValueParser.toCss([node]).length)
+              let offset = ValueParser.toCss([copy]).indexOf(sentinelValue)
+              let output = [
+                '```css',
+                ValueParser.toCss([fn]),
+                ' '.repeat(offset) + underline,
+                '```',
+              ].join('\n')
+              console.warn(output)
+            }
           }
         })
 
@@ -6084,12 +6123,7 @@ function resolveValueFunction(
       // Limit the bare value types, to prevent new syntax that we
       // don't want to support. E.g.: `text-#000` is something we
       // don't want to support, but could be built this way.
-      if (
-        arg.value !== 'number' &&
-        arg.value !== 'integer' &&
-        arg.value !== 'ratio' &&
-        arg.value !== 'percentage'
-      ) {
+      if (!BARE_VALUE_DATA_TYPES.includes(arg.value)) {
         continue
       }