chore: enable tailwind macros and migrate simple uses (#849)

.eslintrc.json

@@ -33,7 +33,9 @@
     "import/no-named-as-default": "off",
     "import/prefer-default-export": "off",
     "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/no-static-element-interactions": "warn",
     "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/alt-text": "warn",
     "no-continue": "off",
     "no-console": ["error"],
     "no-lonely-if": "off",
@@ -61,6 +63,7 @@
     "react/jsx-wrap-multilines": "off",
     "react/jsx-indent": "off",
     "react/no-danger": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["tw", "css"] }],
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
     "react/sort-comp": "off",

.ladle/components.tsx

@@ -65,7 +65,7 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
 
   return (
     <Provider store={store}>
-      <StoryHeader>
+      <div tw="flex flex-row items-center gap-[8px] ">
         <h4>Active Theme:</h4>
         <SelectMenu value={theme} onValueChange={setTheme}>
           {[
@@ -104,20 +104,12 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
             <SelectItem key={value} value={value} label={label} />
           ))}
         </SelectMenu>
-      </StoryHeader>
+      </div>
       <hr />
       {content}
     </Provider>
   );
 };
-
-const StoryHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-`;
-
 const StoryContent = styled.div`
   --default-border-width: 1px;
   --border-width: var(--default-border-width);

.prettierrc.json

@@ -3,7 +3,9 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "jsxBracketSameLine": false,
-  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  "tailwindAttributes": ["tw"],
+  "tailwindFunctions": ["tw"],
   "importOrder": [
     "^./polyfills$",
     "^react$",

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "styled-components.vscode-styled-components"
+    "styled-components.vscode-styled-components",
+    "bradlc.vscode-tailwindcss"
   ]
 }

README.md

@@ -127,6 +127,23 @@ 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

package.json

@@ -134,13 +134,14 @@
     "react-stately": "^3.23.0",
     "reselect": "^5.1.0",
     "styled-components": "^5.3.11",
+    "twin.macro": "^3.4.1",
     "unionize": "^3.1.0",
     "use-latest": "^1.2.1",
     "viem": "^2.16.2",
     "wagmi": "^2.10.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
+    "@babel/core": "^7.23.9",
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
     "@dydxprotocol/v4-proto": "5.0.0-dev.0",
@@ -168,7 +169,9 @@
     "assert": "^2.0.0",
     "axios": "^1.6.7",
     "babel-loader": "^9.1.2",
+    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-styled-components": "^2.1.4",
+    "babel-plugin-twin": "^1.1.0",
     "browserify-zlib": "^0.2.0",
     "chalk": "^5.3.0",
     "eslint": "^8.57.0",
@@ -188,10 +191,13 @@
     "minimist": "^1.2.8",
     "node-fetch": "^3.3.1",
     "pnpm": "^8.6.6",
+    "postcss": "^8.4.39",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "readline-sync": "^1.4.10",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "stream-browserify": "^3.0.0",
+    "tailwindcss": "^3.4.6",
     "ts-node": "^10.9.2",
     "tsx": "^4.7.1",
     "typescript": "^5.1.3",
@@ -209,5 +215,11 @@
     "overrides": {
       "follow-redirects": "1.15.3"
     }
+  },
+  "babelMacros": {
+    "twin": {
+      "preset": "styled-components",
+      "includeClassNames": true
+    }
   }
 }