changing all styles to tailwindcss

apps/obsidian/package.json

@@ -15,18 +15,19 @@
     "@types/node": "^16.11.6",
     "@typescript-eslint/eslint-plugin": "5.29.0",
     "@typescript-eslint/parser": "5.29.0",
+    "autoprefixer": "^10.4.21",
     "builtin-modules": "3.3.0",
     "esbuild": "0.17.3",
     "obsidian": "^1.7.2",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
     "tslib": "2.4.0",
     "tsx": "^4.19.2",
-    "typescript": "4.7.4",
-    "tailwindcss": "^3.3.0",
-    "postcss": "^8.4.24",
-    "autoprefixer": "^10.4.14"
+    "typescript": "4.7.4"
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss-animate": "^1.0.7"
   }
-}
+}

apps/obsidian/src/components/DiscourseContextView.tsx

@@ -51,36 +51,23 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
     }
     return (
       <>
-        <div style={{ marginBottom: "1.5rem" }}>
-          <div
-            style={{
-              fontSize: "1.2em",
-              fontWeight: "bold",
-              marginBottom: "8px",
-            }}
-          >
+        <div className="mb-6">
+          <div className="text-md mb-2 font-bold">
             {nodeType.name || "Unnamed Node Type"}
           </div>
 
           {nodeType.format && (
-            <div style={{ marginBottom: "4px" }}>
-              <span style={{ fontWeight: "bold" }}>Content: </span>
+            <div className="mb-1">
+              <span className="font-bold">Content: </span>
               {extractContentFromTitle(nodeType.format, activeFile.basename)}
             </div>
           )}
         </div>
 
-        <div className="relationships-section">
-          <h5
-            style={{
-              marginTop: "1rem",
-              marginBottom: "0.75rem",
-              borderBottom: "1px solid var(--background-modifier-border)",
-              paddingBottom: "0.25rem",
-            }}
-          >
+        <div>
+          <h4 className="border-modifier-border mb-3 mt-4 border-b pb-1">
             Relationships
-          </h5>
+          </h4>
           <RelationshipSection key={activeFile.path} activeFile={activeFile} />
         </div>
       </>
@@ -89,7 +76,7 @@ const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
 
   return (
     <div>
-      <h4 style={{ marginTop: 0 }}>Discourse Context</h4>
+      <h3>Discourse Context</h3>
       {renderContent()}
     </div>
   );

apps/obsidian/src/components/DropdownSelect.tsx

@@ -70,16 +70,7 @@ const DropdownSelect = <T,>({
     };
   }, []);
 
-  return (
-    <div
-      ref={containerRef}
-      className="dropdown-select"
-      style={{
-        width: "100%",
-        position: "relative",
-      }}
-    />
-  );
+  return <div ref={containerRef} className="dropdown-select relative w-full" />;
 };
 
 export default DropdownSelect;

apps/obsidian/src/components/NodeTypeSettings.tsx

@@ -131,18 +131,16 @@ const NodeTypeSettings = () => {
       <h3>Node Types</h3>
       {nodeTypes.map((nodeType, index) => (
         <div key={index} className="setting-item">
-          <div
-            style={{ display: "flex", flexDirection: "column", width: "100%" }}
-          >
-            <div style={{ display: "flex", gap: "10px" }}>
+          <div className="flex w-full flex-col">
+            <div className="flex gap-2">
               <input
                 type="text"
                 placeholder="Name"
                 value={nodeType.name}
                 onChange={(e) =>
                   handleNodeTypeChange(index, "name", e.target.value)
                 }
-                style={{ flex: 1 }}
+                className="flex-2"
               />
               <input
                 type="text"
@@ -151,35 +149,31 @@ const NodeTypeSettings = () => {
                 onChange={(e) =>
                   handleNodeTypeChange(index, "format", e.target.value)
                 }
-                style={{ flex: 2 }}
+                className="flex-1"
               />
               <button
                 onClick={() => confirmDeleteNodeType(index)}
-                className="mod-warning"
+                className="mod-warning p-2"
               >
                 Delete
               </button>
             </div>
             {formatErrors[index] && (
-              <div
-                style={{
-                  color: "var(--text-error)",
-                  fontSize: "12px",
-                  marginTop: "4px",
-                }}
-              >
+              <div className="text-error mt-1 text-xs">
                 {formatErrors[index]}
               </div>
             )}
           </div>
         </div>
       ))}
       <div className="setting-item">
-        <div style={{ display: "flex", gap: "10px" }}>
-          <button onClick={handleAddNodeType}>Add Node Type</button>
+        <div className="flex gap-2">
+          <button onClick={handleAddNodeType} className="p-2">
+            Add Node Type
+          </button>
           <button
             onClick={handleSave}
-            className={hasUnsavedChanges ? "mod-cta" : ""}
+            className={`p-2 ${hasUnsavedChanges ? "mod-cta" : ""}`}
             disabled={
               !hasUnsavedChanges || Object.keys(formatErrors).length > 0
             }
@@ -189,9 +183,7 @@ const NodeTypeSettings = () => {
         </div>
       </div>
       {hasUnsavedChanges && (
-        <div style={{ marginTop: "8px", color: "var(--text-muted)" }}>
-          You have unsaved changes
-        </div>
+        <div className="text-muted mt-2">You have unsaved changes</div>
       )}
     </div>
   );