diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9ef3526d..a01f382e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -24,7 +24,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           cache: 'pnpm'
-          node-version: ${{ matrix.node-version }}
+          node-version: ${{ matrix.node }}
 
       - name: Install dependencies
         run: pnpm install
diff --git a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap
index 073bc3a8..5db256a2 100644
--- a/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap
+++ b/packages/tailwindcss-language-syntax/tests/__snapshots__/syntax.test.ts.snap
@@ -733,7 +733,7 @@ exports[`@theme 1`] = `
 
   --color: red;
 ^^^^^^^^^^^^^^^                        6: source.css.tailwind meta.at-rule.theme.body.tailwind
-  ^^^^^^^                              1: meta.property-name.css
+  ^^^^^^^                              1: variable.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
@@ -750,7 +750,7 @@ exports[`@theme 1`] = `
 
   --color: red;
 ^^^^^^^^^^^^^^^                        6: source.css.tailwind meta.at-rule.theme.body.tailwind
-  ^^^^^^^                              1: meta.property-name.css
+  ^^^^^^^                              1: variable.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
@@ -767,7 +767,7 @@ exports[`@theme 1`] = `
 
   --color: red;
 ^^^^^^^^^^^^^^^                        6: source.css.tailwind meta.at-rule.theme.body.tailwind
-  ^^^^^^^                              1: meta.property-name.css
+  ^^^^^^^                              1: variable.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
@@ -788,7 +788,7 @@ exports[`@theme 1`] = `
 
   --color: red;
 ^^^^^^^^^^^^^^^                        6: source.css.tailwind meta.at-rule.theme.body.tailwind
-  ^^^^^^^                              1: meta.property-name.css
+  ^^^^^^^                              1: variable.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
@@ -807,21 +807,21 @@ exports[`@theme 1`] = `
 
   --spacing: initial;
 ^^^^^^^^^^^^^^^^^^^^^                  6: source.css.tailwind meta.at-rule.theme.body.tailwind
-  ^^^^^^^^^                            1: meta.property-name.css
+  ^^^^^^^^^                            1: variable.css
            ^                           1: punctuation.separator.key-value.css
              ^^^^^^^                   1: meta.property-value.css support.constant.property-value.css
                     ^                  1: punctuation.terminator.rule.css
 
   --color-*: initial;
 ^^^^^^^^^^^^^^^^^^^^^                  7: source.css.tailwind meta.at-rule.theme.body.tailwind
-  ^^^^^^^^                             1: meta.property-name.css
+  ^^^^^^^^                             1: variable.css
            ^                           1: punctuation.separator.key-value.css
              ^^^^^^^                   1: meta.property-value.css support.constant.property-value.css
                     ^                  1: punctuation.terminator.rule.css
 
   --animate-pulse: 1s pulse infinite;
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  9: source.css.tailwind meta.at-rule.theme.body.tailwind
-  ^^^^^^^^^^^^^^^                      1: meta.property-name.css
+  ^^^^^^^^^^^^^^^                      1: variable.css
                  ^                     1: punctuation.separator.key-value.css
                    ^^^^^^^^^^^^^^^^^   4: meta.property-value.css
                    ^^                  2: constant.numeric.css
@@ -833,46 +833,130 @@ exports[`@theme 1`] = `
 ^                                      1: source.css.tailwind meta.at-rule.theme.body.tailwind
 
   @keyframes pulse {
-^^^^^^^^^^^^^^^^^^^^^                  5: source.css.tailwind meta.at-rule.theme.body.tailwind
-   ^^^^^^^^^ ^^^^^                     2: meta.property-name.css
+^^^^^^^^^^^^^^^^^^^^                   7: source.css.tailwind meta.at-rule.theme.body.tailwind
+  ^^^^^^^^^^^^^^^^                     4: meta.at-rule.keyframes.header.css
+  ^^^^^^^^^^                           2: keyword.control.at-rule.keyframes.css
+  ^                                    1: punctuation.definition.keyword.css
+             ^^^^^                     1: variable.parameter.keyframe-list.css
+                   ^                   1: meta.at-rule.keyframes.body.css punctuation.section.keyframes.begin.bracket.curly.css
 
     0%,
-^^^^^^^^                               1: source.css.tailwind meta.at-rule.theme.body.tailwind
+^^^^^^^^                               3: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
+    ^^                                 1: entity.other.keyframe-offset.percentage.css
 
     100% {
-^^^^^^^^^^^                            1: source.css.tailwind meta.at-rule.theme.body.tailwind
+^^^^^^^^^^                             4: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
+    ^^^^                               1: entity.other.keyframe-offset.percentage.css
+         ^                             1: meta.property-list.css punctuation.section.property-list.begin.bracket.curly.css
 
       opacity: 0;
-^^^^^^^^^^^^^^^^^                      6: source.css.tailwind meta.at-rule.theme.body.tailwind
+^^^^^^^^^^^^^^^^^                      6: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
       ^^^^^^^                          1: meta.property-name.css support.type.property-name.css
              ^                         1: punctuation.separator.key-value.css
                ^                       1: meta.property-value.css constant.numeric.css
                 ^                      1: punctuation.terminator.rule.css
 
     }
-^^^^^                                  2: source.css.tailwind meta.at-rule.theme.body.tailwind
-    ^                                  1: punctuation.section.theme.end.bracket.curly.tailwind
+^^^^^                                  2: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
+    ^                                  1: punctuation.section.property-list.end.bracket.curly.css
 
     50% {
-^^^^^^^^^                              2: source.css.tailwind
+^^^^^^^^^                              4: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
+    ^^^                                1: entity.other.keyframe-offset.percentage.css
         ^                              1: meta.property-list.css punctuation.section.property-list.begin.bracket.curly.css
 
       opacity: 1;
-^^^^^^^^^^^^^^^^^                      6: source.css.tailwind meta.property-list.css
+^^^^^^^^^^^^^^^^^                      6: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
       ^^^^^^^                          1: meta.property-name.css support.type.property-name.css
              ^                         1: punctuation.separator.key-value.css
                ^                       1: meta.property-value.css constant.numeric.css
                 ^                      1: punctuation.terminator.rule.css
 
     }
-^^^^^                                  2: source.css.tailwind meta.property-list.css
+^^^^^                                  2: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css meta.property-list.css
     ^                                  1: punctuation.section.property-list.end.bracket.curly.css
 
   }
-^^^^                                   1: source.css.tailwind
+^^^                                    2: source.css.tailwind meta.at-rule.theme.body.tailwind meta.at-rule.keyframes.body.css
+  ^                                    1: punctuation.section.keyframes.end.bracket.curly.css
+
+}
+^                                      1: source.css.tailwind meta.at-rule.theme.body.tailwind punctuation.section.theme.end.bracket.curly.tailwind
+
+
+^                                      1: source.css.tailwind
+
+@theme {
+^^^^^^^^                               4: source.css.tailwind
+^^^^^^                                 2: keyword.control.at-rule.theme.tailwind
+^                                      1: punctuation.definition.keyword.css
+       ^                               1: meta.at-rule.theme.body.tailwind punctuation.section.theme.begin.bracket.curly.tailwind
+
+  /** Comment 0 */
+^^^^^^^^^^^^^^^^^^                     4: source.css.tailwind meta.at-rule.theme.body.tailwind
+  ^^^^^^^^^^^^^^^^                     3: comment.block.css
+  ^^                                   1: punctuation.definition.comment.begin.css
+                ^^                     1: punctuation.definition.comment.end.css
+
+
+^                                      1: source.css.tailwind meta.at-rule.theme.body.tailwind
+
+  /** Comment 1 */
+^^^^^^^^^^^^^^^^^^                     4: source.css.tailwind meta.at-rule.theme.body.tailwind
+  ^^^^^^^^^^^^^^^^                     3: comment.block.css
+  ^^                                   1: punctuation.definition.comment.begin.css
+                ^^                     1: punctuation.definition.comment.end.css
+
+  --color-1: red;
+^^^^^^^^^^^^^^^^^                      6: source.css.tailwind meta.at-rule.theme.body.tailwind
+  ^^^^^^^^^                            1: variable.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
+
+
+^                                      1: source.css.tailwind meta.at-rule.theme.body.tailwind
+
+  /** Comment 2 */
+^^^^^^^^^^^^^^^^^^                     4: source.css.tailwind meta.at-rule.theme.body.tailwind
+  ^^^^^^^^^^^^^^^^                     3: comment.block.css
+  ^^                                   1: punctuation.definition.comment.begin.css
+                ^^                     1: punctuation.definition.comment.end.css
+
+  --color-2: green;
+^^^^^^^^^^^^^^^^^^^                    6: source.css.tailwind meta.at-rule.theme.body.tailwind
+  ^^^^^^^^^                            1: variable.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
+
+
+^                                      1: source.css.tailwind meta.at-rule.theme.body.tailwind
+
+  /** Comment 3 */
+^^^^^^^^^^^^^^^^^^                     4: source.css.tailwind meta.at-rule.theme.body.tailwind
+  ^^^^^^^^^^^^^^^^                     3: comment.block.css
+  ^^                                   1: punctuation.definition.comment.begin.css
+                ^^                     1: punctuation.definition.comment.end.css
+
+  --color-2: blue;
+^^^^^^^^^^^^^^^^^^                     6: source.css.tailwind meta.at-rule.theme.body.tailwind
+  ^^^^^^^^^                            1: variable.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
+
+
+^                                      1: source.css.tailwind meta.at-rule.theme.body.tailwind
+
+  /** Comment 4 */
+^^^^^^^^^^^^^^^^^^                     4: source.css.tailwind meta.at-rule.theme.body.tailwind
+  ^^^^^^^^^^^^^^^^                     3: comment.block.css
+  ^^                                   1: punctuation.definition.comment.begin.css
+                ^^                     1: punctuation.definition.comment.end.css
 
 }
-^^                                     1: source.css.tailwind
+^                                      1: source.css.tailwind meta.at-rule.theme.body.tailwind punctuation.section.theme.end.bracket.curly.tailwind
 "
 `;
 
diff --git a/packages/tailwindcss-language-syntax/tests/syntax.test.ts b/packages/tailwindcss-language-syntax/tests/syntax.test.ts
index fa68eab3..20941760 100644
--- a/packages/tailwindcss-language-syntax/tests/syntax.test.ts
+++ b/packages/tailwindcss-language-syntax/tests/syntax.test.ts
@@ -36,6 +36,21 @@ test('@theme', async ({ expect }) => {
         }
       }
     }
+
+    @theme {
+      /** Comment 0 */
+
+      /** Comment 1 */
+      --color-1: red;
+
+      /** Comment 2 */
+      --color-2: green;
+
+      /** Comment 3 */
+      --color-2: blue;
+
+      /** Comment 4 */
+    }
   `)
 
   expect(result.toString()).toMatchSnapshot()
diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
index 94971656..b481c4c1 100644
--- a/packages/vscode-tailwindcss/CHANGELOG.md
+++ b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -2,7 +2,9 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Highlight CSS variables correctly inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
+- Highlight comments inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
+- Highlight at-rules inside `@theme` ([#1409](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1409))
 
 ## 0.14.21
 
diff --git a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json
index 0e074444..a029bd4c 100644
--- a/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json
+++ b/packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json
@@ -494,6 +494,16 @@
   "repository": {
     "property-list": {
       "patterns": [
+        {
+          "include": "source.css#comment-block"
+        },
+        {
+          "include": "source.css#escapes"
+        },
+        {
+          "match": "(?x) (?<![\\w-])\n--\n(?:[-a-zA-Z_]    | [^\\x00-\\x7F])     # First letter\n(?:[-a-zA-Z0-9_] | [^\\x00-\\x7F]      # Remainder of identifier\n  |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*",
+          "name": "variable.css"
+        },
         {
           "begin": "(?<![-a-zA-Z])(?=[-a-zA-Z])",
           "end": "$|(?![-a-zA-Z])",
@@ -530,6 +540,9 @@
         {
           "match": ";",
           "name": "punctuation.terminator.rule.css"
+        },
+        {
+          "include": "source.css#at-rules"
         }
       ]
     },