Fix @utility to accept already-escaped utility names

packages/tailwindcss/src/index.test.ts

@@ -4787,6 +4787,59 @@ describe('@utility', () => {
       `[Error: \`@utility ui/button/sm\` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.]`,
     )
   })
+
+  // https://github.com/tailwindlabs/tailwindcss/issues/19607
+  test('@utility supports escaped utility names', async () => {
+    // Linters like biome require the `/` to be escaped as `\/` in CSS.
+    // Tailwind should accept the already-escaped form `my\/utility` and treat
+    // it as equivalent to the unescaped `my/utility`.
+    await expect(
+      compileCss(
+        css`
+          @utility my\/utility {
+            display: inline-flex;
+            background: blue;
+          }
+          @tailwind utilities;
+        `,
+        ['my/utility'],
+      ),
+    ).resolves.toMatchInlineSnapshot(
+      `
+      ".my\\/utility {
+        background: #00f;
+        display: inline-flex;
+      }"
+    `,
+    )
+  })
+
+  test('@utility with escaped name is equivalent to the unescaped form', async () => {
+    // `@utility my\/button` (escaped) should produce the same result as
+    // `@utility my/button` (unescaped).
+    let [escapedResult, unescapedResult] = await Promise.all([
+      compileCss(
+        css`
+          @utility my\/button {
+            display: inline-flex;
+          }
+          @tailwind utilities;
+        `,
+        ['my/button'],
+      ),
+      compileCss(
+        css`
+          @utility my/button {
+            display: inline-flex;
+          }
+          @tailwind utilities;
+        `,
+        ['my/button'],
+      ),
+    ])
+
+    expect(escapedResult).toEqual(unescapedResult)
+  })
 })
 
 test('addBase', async () => {

packages/tailwindcss/src/utilities.ts

@@ -16,6 +16,7 @@ import { enableContainerSizeUtility } from './feature-flags'
 import type { Theme, ThemeKey } from './theme'
 import { compareBreakpoints } from './utils/compare-breakpoints'
 import { DefaultMap } from './utils/default-map'
+import { unescape } from './utils/escape'
 import {
   inferDataType,
   isPositiveInteger,
@@ -5939,7 +5940,11 @@ export const BARE_VALUE_DATA_TYPES = [
 ]
 
 export function createCssUtility(node: AtRule) {
-  let name = node.params
+  // Unescape the utility name so that CSS escape sequences (e.g. `my\/utility`)
+  // are treated as their unescaped equivalents (e.g. `my/utility`). This
+  // allows linters that require proper CSS escaping (e.g. biome) to work
+  // correctly with @utility rules that contain special characters.
+  let name = unescape(node.params)
 
   // Functional utilities. E.g.: `tab-size-*`
   if (isValidFunctionalUtilityName(name)) {