Added tailwind watch for dev mode

- adds auto compile for tailwind in dev mode

apps/comments-ui/package.json

@@ -31,7 +31,8 @@
     "ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn publish && git push ${GHOST_UPSTREAM:-upstream} main --follow-tags; fi",
     "posttest": "yarn lint",
     "analyze": "source-map-explorer 'umd/*.js'",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "yarn build",
+    "tailwind": "npx tailwindcss -i ./src/index.css -o ./public/main.css --watch"
   },
   "eslintConfig": {
     "extends": [

apps/comments-ui/scripts/start-mode.js

@@ -9,6 +9,7 @@ const log = console.log;
 /* eslint-enable no-console */
 
 let yarnStartProcess;
+let tailwindServerProcess;
 let stdOutChunks = [];
 let stdErrChunks = [];
 let startYarnOutput = false;
@@ -55,6 +56,7 @@ function printInstructions() {
 
 function onProcessClose(code) {
     yarnStartProcess = null;
+    tailwindServerProcess = null;
     stdErrChunks = [];
     stdOutChunks = [];
     log(chalk.redBright.bold.underline(`Please restart the script...\n`));
@@ -99,6 +101,33 @@ function doYarnStart() {
     }
 }
 
+function doTailwindServerStart() {
+    if (tailwindServerProcess) {
+        return;
+    }
+    const options = getBuildOptions();
+    tailwindServerProcess = spawn('yarn tailwind', options);
+
+    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+        tailwindServerProcess.on(sig, function () {
+            tailwindServerProcess && tailwindServerProcess.exit();
+        });
+    });
+
+    tailwindServerProcess.on('close', onProcessClose);
+
+    if (!showVerbose) {
+        tailwindServerProcess.stdout.on('data', (data) => {
+            stdOutChunks.push(data);
+            printYarnProcessOutput(data);
+        });
+        tailwindServerProcess.stderr.on('data', (data) => {
+            log(Buffer.from(data).toString());
+            stdErrChunks.push(data);
+        });
+    }
+}
+
 function printYarnProcessOutput(data) {
     const dataStr = Buffer.from(data).toString();
     const dataArr = dataStr.split('\n').filter((d) => {
@@ -144,6 +173,7 @@ function startDevServer() {
         log(chalk.whiteBright(`Comments dev server is running on http://localhost:${port}`));
         printInstructions();
         doYarnStart();
+        doTailwindServerStart();
     });
 }