diff --git a/package.json b/package.json
index 6c6de45..d79055b 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
           "source.tsx",
           "text.html"
         ],
-        "path": "./syntaxes/tailwindcss.json",
+        "path": "./syntaxes/tailwindcss.tmLanguage.json",
         "scopeName": "source.tailwindcss"
       }
     ]
diff --git a/syntaxes/tailwindcss.json b/syntaxes/tailwindcss.tmLanguage.json
similarity index 52%
rename from syntaxes/tailwindcss.json
rename to syntaxes/tailwindcss.tmLanguage.json
index 258acef..0a10144 100644
--- a/syntaxes/tailwindcss.json
+++ b/syntaxes/tailwindcss.tmLanguage.json
@@ -4,57 +4,91 @@
   "name": "tailwindcss syntax highlighting",
   "patterns": [
     {
+      "include": "#class-attribute"
+    }
+  ],
+  "repository": {
+    "braces": {
       "captures": {
         "1": {
-          "name": "entity.other.attribute-name.tailwindcss"
-        },
-        "2": {
-          "name": "keyword.operator.assignment.tailwindcss"
-        },
-        "3": {
           "name": "punctuation.definition.block.tailwindcss"
+        }
+      },
+      "match": "([{}])"
+    },
+    "brackets": {
+      "captures": {
+        "1": {
+          "name": "meta.brace.square.tailwindcss"
         },
-        "4": {
-          "name": "string.quoted.tailwindcss",
-          "patterns": [
-            {
-              "include": "#quotes"
-            }
-          ]
-        },
-        "5": {
-          "name": "string.quoted.tailwindcss",
+        "2": {
           "patterns": [
             {
               "captures": {
                 "1": {
+                  "name": "support.type.property-name.css.tailwindcss",
                   "patterns": [
                     {
-                      "include": "#class-with-variants"
+                      "match": "(.*)",
+                      "name": "property-name.tailwindcss"
+                    }
+                  ]
+                },
+                "2": {
+                  "name": "keyword.operator.assignment.tailwindcss"
+                },
+                "3": {
+                  "patterns": [
+                    {
+                      "captures": {
+                        "1": {
+                          "name": "property-value.tailwindcss",
+                          "patterns": [
+                            {
+                              "include": "#numbers"
+                            },
+                            {
+                              "include": "#functions"
+                            },
+                            {
+                              "include": "#selectors"
+                            },
+                            {
+                              "include": "#commas"
+                            }
+                          ]
+                        }
+                      },
+                      "match": "(.*)",
+                      "name": "support.constant.property-value.css.tailwindcss"
                     }
                   ]
                 }
               },
-              "match": "([^\\s]+)"
-            }
-          ]
-        },
-        "6": {
-          "name": "string.quoted.tailwindcss",
-          "patterns": [
+              "match": "([\\w-]+)(:)(.*)"
+            },
             {
-              "include": "#quotes"
+              "include": "#numbers"
+            },
+            {
+              "include": "#functions"
+            },
+            {
+              "include": "#selectors"
+            },
+            {
+              "include": "#commas"
             }
           ]
         },
-        "7": {
-          "name": "punctuation.definition.block.tailwindcss"
+        "3": {
+          "name": "meta.brace.square.tailwindcss"
         }
       },
-      "match": "\\s*\\b(class|className)\\b\\s*(=)\\s*({?)\\s*([\"'`])\\s*(.*?)\\s*(\\4)(?:\\s*(?=\\s*}))?(}?)"
+      "match": "(\\[)(.*)(\\])"
     },
-    {
-      "begin": "\\s*\\b(class|className)\\b\\s*(=)\\s*({?)\\s*([\"'`])",
+    "class-attribute": {
+      "begin": "\\s*\\b(class|className)\\b\\s*(=)\\s*({)?([\"'`])",
       "beginCaptures": {
         "1": {
           "name": "entity.other.attribute-name.tailwindcss"
@@ -63,10 +97,13 @@
           "name": "keyword.operator.assignment.tailwindcss"
         },
         "3": {
-          "name": "punctuation.definition.block.tailwindcss"
+          "patterns": [
+            {
+              "include": "#braces"
+            }
+          ]
         },
         "4": {
-          "name": "string.quoted.tailwindcss",
           "patterns": [
             {
               "include": "#quotes"
@@ -74,10 +111,9 @@
           ]
         }
       },
-      "end": "\\s*(\\4)\\s*(}?)\\s*",
+      "end": "([\\4])(})?",
       "endCaptures": {
         "1": {
-          "name": "string.quoted.tailwindcss",
           "patterns": [
             {
               "include": "#quotes"
@@ -85,141 +121,16 @@
           ]
         },
         "2": {
-          "name": "punctuation.definition.block.tailwindcss"
-        }
-      },
-      "patterns": [
-        {
-          "captures": {
-            "1": {
-              "patterns": [
-                {
-                  "include": "#class-with-variants"
-                }
-              ]
-            }
-          },
-          "match": "([^\\s]+)"
-        }
-      ]
-    }
-  ],
-  "repository": {
-    "brackets": {
-      "patterns": [
-        {
-          "captures": {
-            "1": {
-              "name": "meta.brace.square.tailwindcss"
-            },
-            "2": {
-              "patterns": [
-                {
-                  "captures": {
-                    "1": {
-                      "name": "support.type.property-name.css.tailwindcss",
-                      "patterns": [
-                        {
-                          "match": "(.*)",
-                          "name": "property-name.tailwindcss"
-                        }
-                      ]
-                    },
-                    "2": {
-                      "name": "keyword.operator.assignment.tailwindcss"
-                    },
-                    "3": {
-                      "patterns": [
-                        {
-                          "captures": {
-                            "1": {
-                              "name": "property-value.tailwindcss",
-                              "patterns": [
-                                {
-                                  "include": "#numbers"
-                                },
-                                {
-                                  "include": "#functions"
-                                },
-                                {
-                                  "include": "#selectors"
-                                },
-                                {
-                                  "include": "#commas"
-                                }
-                              ]
-                            }
-                          },
-                          "match": "(.*)",
-                          "name": "support.constant.property-value.css.tailwindcss"
-                        }
-                      ]
-                    }
-                  },
-                  "match": "([\\w-]+)(:)(.*)"
-                },
-                {
-                  "include": "#numbers"
-                },
-                {
-                  "include": "#functions"
-                },
-                {
-                  "include": "#selectors"
-                },
-                {
-                  "include": "#commas"
-                }
-              ]
-            },
-            "3": {
-              "name": "meta.brace.square.tailwindcss"
+          "patterns": [
+            {
+              "include": "#braces"
             }
-          },
-          "match": "(\\[)(.*)(\\])"
+          ]
         }
-      ]
-    },
-    "class": {
+      },
       "patterns": [
         {
-          "captures": {
-            "1": {
-              "name": "class.tailwindcss",
-              "patterns": [
-                {
-                  "include": "#numbers"
-                },
-                {
-                  "include": "#brackets"
-                },
-                {
-                  "include": "#functions"
-                },
-                {
-                  "include": "#slash"
-                },
-                {
-                  "include": "#important"
-                }
-              ]
-            }
-          },
-          "match": "[^:]*?(.*(?=$))",
-          "name": "support.type.property-name.css.tailwindcss"
-        }
-      ]
-    },
-    "class-with-variants": {
-      "patterns": [
-        {
-          "include": "#negate"
-        },
-        {
-          "include": "#variant"
-        },
-        {
-          "include": "#class"
+          "include": "#multi-class-string-without-quotes"
         }
       ]
     },
@@ -269,6 +180,18 @@
       "match": "(!(?=\\w))",
       "name": "keyword.other.important.css.tailwindcss"
     },
+    "multi-class-string-without-quotes": {
+      "captures": {
+        "1": {
+          "patterns": [
+            {
+              "include": "#tailwindcss-class-with-variants"
+            }
+          ]
+        }
+      },
+      "match": "([^\\s]+?)"
+    },
     "negate": {
       "captures": {
         "1": {
@@ -328,6 +251,45 @@
       },
       "match": "(/)"
     },
+    "tailwindcss-class": {
+      "captures": {
+        "1": {
+          "name": "class.tailwindcss",
+          "patterns": [
+            {
+              "include": "#numbers"
+            },
+            {
+              "include": "#brackets"
+            },
+            {
+              "include": "#functions"
+            },
+            {
+              "include": "#slash"
+            },
+            {
+              "include": "#important"
+            }
+          ]
+        }
+      },
+      "match": "[^:]*?([^\\s]+)",
+      "name": "support.type.property-name.css.tailwindcss"
+    },
+    "tailwindcss-class-with-variants": {
+      "patterns": [
+        {
+          "include": "#negate"
+        },
+        {
+          "include": "#variant"
+        },
+        {
+          "include": "#tailwindcss-class"
+        }
+      ]
+    },
     "variant": {
       "patterns": [
         {