[ENG-97] Use TailwindCSS in obsidian app

apps/obsidian/package.json

@@ -12,6 +12,7 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@repo/tailwind-config": "*",
     "@types/node": "^16.11.6",
     "@typescript-eslint/eslint-plugin": "5.29.0",
     "@typescript-eslint/parser": "5.29.0",
@@ -20,10 +21,13 @@
     "obsidian": "^1.7.2",
     "tslib": "2.4.0",
     "tsx": "^4.19.2",
-    "typescript": "4.7.4"
+    "typescript": "4.7.4",
+    "tailwindcss": "^3.3.0",
+    "postcss": "^8.4.24",
+    "autoprefixer": "^10.4.14"
   },
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }
-}
+}

apps/obsidian/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/obsidian/scripts/compile.ts

@@ -4,6 +4,9 @@ import path from "path";
 import { z } from "zod";
 import builtins from "builtin-modules";
 import dotenv from "dotenv";
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
+import autoprefixer from "autoprefixer";
 
 dotenv.config();
 
@@ -110,15 +113,41 @@ export const compile = ({
           name: "combineStyles",
           setup(build) {
             build.onEnd(async () => {
-              const styleFiles = fs
-                .readdirSync(stylesDir)
-                .filter((file) => file.endsWith(".css"));
-              const combinedStyles = styleFiles
-                .map((file) =>
-                  fs.readFileSync(path.join(stylesDir, file), "utf8"),
-                )
-                .join("\n");
-              fs.writeFileSync(outputStylesFile, combinedStyles);
+              const rootStylesPath = path.join(root, "styles.css");
+              if (fs.existsSync(rootStylesPath)) {
+                const css = fs.readFileSync(rootStylesPath, "utf8");
+                const result = await postcss([
+                  tailwindcss(path.join(root, "tailwind.config.ts")),
+                  autoprefixer(),
+                ]).process(css, { from: rootStylesPath, to: outputStylesFile });
+
+                let additionalStyles = "";
+                if (fs.existsSync(stylesDir)) {
+                  const styleFiles = fs
+                    .readdirSync(stylesDir)
+                    .filter((file) => file.endsWith(".css"));
+                  additionalStyles = styleFiles
+                    .map((file) =>
+                      fs.readFileSync(path.join(stylesDir, file), "utf8"),
+                    )
+                    .join("\n");
+                }
+
+                fs.writeFileSync(
+                  outputStylesFile,
+                  result.css + "\n" + additionalStyles,
+                );
+              } else if (fs.existsSync(stylesDir)) {
+                const styleFiles = fs
+                  .readdirSync(stylesDir)
+                  .filter((file) => file.endsWith(".css"));
+                const combinedStyles = styleFiles
+                  .map((file) =>
+                    fs.readFileSync(path.join(stylesDir, file), "utf8"),
+                  )
+                  .join("\n");
+                fs.writeFileSync(outputStylesFile, combinedStyles);
+              }
             });
           },
         },

apps/obsidian/styles.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .discourse-relations .relationship-visualization {
   transition: all 0.2s ease;
 }

apps/obsidian/tailwind.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "tailwindcss";
+
+const config: Pick<Config, "content" | "presets"> = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+};
+
+export default config;