Fix at-rule syntax highlighting in @utility (#1501)

Fixes #1500

Before:
<img width="341" height="515" alt="Screenshot 2025-11-26 at 07 33 54"
src="https://github.com/user-attachments/assets/167e2e6d-f73f-4875-8545-57298f135ab4"
/>

After:
<img width="305" height="504" alt="Screenshot 2025-11-26 at 07 34 05"
src="https://github.com/user-attachments/assets/1d7fb149-51d5-4aa1-abde-905cb814870a"
/>

Author: thecrypticace

packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap

@@ -1103,6 +1103,53 @@ exports[`@utility 1`] = `
 
 }
 ^                                      1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind
+
+
+^                                      1: source.css.tailwind
+
+@utility foo {
+^^^^^^^^^^^^^^                         6: source.css.tailwind
+^^^^^^^^                               2: keyword.control.at-rule.utility.tailwind
+^                                      1: punctuation.definition.keyword.css
+         ^^^                           1: variable.parameter.utility.tailwind
+             ^                         1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind
+
+  @apply flex;
+^^^^^^^^^^^^^^                         5: source.css.tailwind meta.at-rule.utility.body.tailwind
+  ^^^^^^^^^^^^                         4: meta.at-rule.header.css
+  ^^^^^^                               2: keyword.control.at-rule.css
+  ^                                    1: punctuation.definition.keyword.css
+             ^                         1: punctuation.terminator.rule.css
+
+}
+^                                      1: source.css.tailwind meta.at-rule.utility.body.tailwind punctuation.section.utility.end.bracket.curly.tailwind
+
+
+^                                      1: source.css.tailwind
+
+@utility foo {
+^^^^^^^^^^^^^^                         6: source.css.tailwind
+^^^^^^^^                               2: keyword.control.at-rule.utility.tailwind
+^                                      1: punctuation.definition.keyword.css
+         ^^^                           1: variable.parameter.utility.tailwind
+             ^                         1: meta.at-rule.utility.body.tailwind punctuation.section.utility.begin.bracket.curly.tailwind
+
+  & {
+^^^^^^                                 1: source.css.tailwind meta.at-rule.utility.body.tailwind
+
+    color: red;
+^^^^^^^^^^^^^^^                        6: source.css.tailwind meta.at-rule.utility.body.tailwind
+    ^^^^^                              1: meta.property-name.css support.type.property-name.css
+         ^                             1: punctuation.separator.key-value.css
+           ^^^                         1: meta.property-value.css support.constant.color.w3c-standard-color-name.css
+              ^                        1: punctuation.terminator.rule.css
+
+  }
+^^^                                    2: source.css.tailwind meta.at-rule.utility.body.tailwind
+  ^                                    1: punctuation.section.utility.end.bracket.curly.tailwind
+
+}
+^^                                     1: source.css.tailwind
 "
 `;
 

packages/tailwindcss-language-syntax/tests/syntax.test.ts

@@ -196,6 +196,16 @@ test('@utility', async ({ expect }) => {
       tab-size: --value(--tab-size-*);
       font-size: 12px;
     }
+
+    @utility foo {
+      @apply flex;
+    }
+
+    @utility foo {
+      & {
+        color: red;
+      }
+    }
   `)
 
   expect(result.toString()).toMatchSnapshot()

packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json

@@ -389,7 +389,7 @@
           "name": "meta.at-rule.utility.body.tailwind",
           "patterns": [
             {
-              "include": "source.css#rule-list-innards"
+              "include": "#property-list"
             }
           ]
         }