chore: add tailwind vscode configs [OTE-668] (#880)

.vscode/settings.json

@@ -9,5 +9,26 @@
   },
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit"
+  },
+  "tailwindCSS.classAttributes": ["tw"],
+  "tailwindCSS.experimental.classRegex": [
+    "tw`([^`]*)", // tw`...`
+    "tw=\"([^\"]*)", // <div tw="..." />
+    "tw={\"([^\"}]*)", // <div tw={"..."} />
+    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
+    "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
+  ],
+  "tailwindCSS.emmetCompletions": true,
+  "emmet.includeLanguages": {
+    "\"typescript\"": "\"typescriptreact\""
+  },
+  "emmet.syntaxProfiles": {
+    "jsx": {
+      "markup.attributes": {
+        "class": "tw",
+        "class*": "tw"
+      },
+      "self_closing_tag": true
+    }
   }
 }

README.md

@@ -127,23 +127,6 @@ Edit `vercel.json` and configure the `rewrites` configuration option. It is an a
 
 Note: The first matching rule takes precedence over anything defined afterwards in the array.
 
-# VSCode setup
-
-We use twin.macro for tailwind styling shorthands. To get the tailwind VSCode extension to work correctly, add the following to your settings.json:
-
-```
-  "tailwindCSS.classAttributes": [
-    "tw"
-  ],
-  "tailwindCSS.experimental.classRegex": [
-    "tw`([^`]*)", // tw`...`
-    "tw=\"([^\"]*)", // <div tw="..." />
-    "tw={\"([^\"}]*)", // <div tw={"..."} />
-    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
-    "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
-  ]
-```
-
 # Testing
 
 ## Unit testing