fix: className rebuilding on tailwind --watch script

pages/content-ui/package.json

@@ -10,15 +10,14 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist",
-    "build:tailwindcss": "pnpm dlx tailwindcss -i ./src/tailwind-input.css -o ./src/tailwind-output.css --watch",
-    "build": "pnpm run clean && pnpm type-check && pnpm build:tailwindcss && vite build",
-    "build:watch": "cross-env __DEV__=true vite build --mode development && pnpm build:tailwindcss",
+    "build:tailwindcss": "pnpm dlx tailwindcss -i ./src/tailwind-input.css -o ./dist/tailwind-output.css -m",
+    "build": "pnpm clean && pnpm type-check && pnpm build:tailwindcss && vite build",
+    "build:watch": "cross-env __DEV__=true concurrently \"vite build --mode development\" \"pnpm build:tailwindcss -- -w\"",
     "dev": "pnpm build:watch",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "pnpm lint --fix",
     "prettier": "prettier . --write --ignore-path ../../.prettierignore",
-    "type-check": "tsc --noEmit",
-    "postinstall": "pnpm run build:tailwindcss"
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@extension/shared": "workspace:*"
@@ -27,6 +26,7 @@
     "@extension/tailwindcss-config": "workspace:*",
     "@extension/tsconfig": "workspace:*",
     "@extension/hmr": "workspace:*",
-    "@extension/vite-config": "workspace:*"
+    "@extension/vite-config": "workspace:*",
+    "concurrently": "^8.2.2"
   }
 }

pages/content-ui/src/app.tsx

@@ -6,8 +6,8 @@ export default function App() {
   }, []);
 
   return (
-    <div className="flex gap-1 text-blue-500">
-      Edit <strong>pages/content-ui/src/app.tsx</strong> and save to reload.
+    <div className={'flex gap-1 text-blue-500'}>
+      Edit <strong className={'text-blue-700'}>pages/content-ui/src/app.tsx</strong> and save to reload.
     </div>
   );
 }

pages/content-ui/src/index.tsx

@@ -1,8 +1,7 @@
 import { createRoot } from 'react-dom/client';
 import App from '@src/app';
-// eslint-disable-next-line
-// @ts-ignore
-import tailwindcssOutput from '@src/tailwind-output.css?inline';
+// @ts-expect-error That's because output file is create during build
+import tailwindcssOutput from '../dist/tailwind-output.css?inline';
 
 const root = document.createElement('div');
 root.id = 'chrome-extension-boilerplate-react-vite-content-view-root';