diff --git a/package.json b/package.json
index e4c5dd65c7341151174176a9b9bf7e909711c89f..77b737a67ba0d3d7fdd3d92de3f1d2eb9a9e371a 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,22 @@   "activationEvents": [
     "workspaceContains:**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js"
   ],
   "main": "./out/extension",
+  "version": "0.1.9",
   "name": "vscode-tailwindcss",
+    "grammars": [
   "version": "0.1.9",
+  "description": "Tailwind CSS class name completion",
+        "scopeName": "source.css.tailwind",
+        "path": "./syntaxes/tailwind.tmLanguage.json",
+        "injectTo": [
+          "source.css",
+          "source.css.scss",
+          "source.css.less",
+          "source.css.postcss"
+        ]
+      }
+    ]
+  },
   "preview": true,
   "scripts": {
     "vscode:prepublish": "npm run compile",

diff --git a/syntaxes/tailwind.tmLanguage.json b/syntaxes/tailwind.tmLanguage.json
new file mode 100644
index 0000000000000000000000000000000000000000..a7adc63420270ec5e150ca74f9b6945b9ea5d9ca
--- /dev/null
+++ b/syntaxes/tailwind.tmLanguage.json
@@ -0,0 +1,75 @@
+{
+  "scopeName": "source.css.tailwind",
+  "fileTypes": [],
+  "injectionSelector": "meta.property-list.css, meta.property-list.scss",
+  "name": "TailwindCSS",
+  "patterns": [
+    {
+      "begin": "^\\s*(@)apply\\b",
+      "beginCaptures": {
+        "0": {
+          "name": "keyword.control.at-rule.apply.tailwind"
+        },
+        "1": {
+          "name": "punctuation.definition.keyword.tailwind"
+        }
+      },
+      "end": ";",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.terminator.rule.tailwind"
+        }
+      },
+      "patterns": [
+        {
+          "begin": "(?x)\n(?=\n  (?:\\|)?                    # Possible anonymous namespace prefix\n  (?:\n    [-\\[:.*\\#a-zA-Z_]       # Valid selector character\n    |\n    [^\\x00-\\x7F]            # Which can include non-ASCII symbols\n    |\n    \\\\                      # Or an escape sequence\n    (?:[0-9a-fA-F]{1,6}|.)\n  )\n)",
+          "end": "(?=\\s*[;])",
+          "patterns": [
+            {
+              "match": "!\\s*important(?![\\w-])",
+              "name": "keyword.other.important.tailwind"
+            },
+            {
+              "captures": {
+                "1": {
+                  "name": "punctuation.definition.entity.tailwind"
+                },
+                "2": {
+                  "patterns": [
+                    {
+                      "include": "source.css#escapes"
+                    }
+                  ]
+                }
+              },
+              "match": "(?x)\n(\\.)?                                  # Valid class-name\n(\n  (?: [-a-zA-Z_0-9]|[^\\x00-\\x7F]     # Valid identifier characters\n    | \\\\(?:[0-9a-fA-F]{1,6}|.)       # Escape sequence\n  )+\n)                                      # Followed by either:\n(?= $                                  # - End of the line\n  | [\\s,.\\#)\\[:{>;+~|]               # - Another selector\n  | /\\*                               # - A block comment\n)",
+              "name": "entity.other.attribute-name.class.tailwind"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "begin": "(?i)(?<![\\w-])(config)(\\()",
+      "beginCaptures": {
+        "1": {
+          "name": "support.function.config.tailwind"
+        },
+        "2": {
+          "name": "punctuation.section.function.begin.bracket.round.tailwind"
+        }
+      },
+      "end": "\\)",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.section.function.end.bracket.round.tailwind"
+        }
+      },
+      "patterns": [
+        {
+          "include": "source.css#property-values"
+        }
+      ]
+    }
+  ]
+}