鐵人賽第24天
今天繼續處理前端的問題。
請AI同事進一步分析後，發現應該是 Element Plus 與 Tailwind 衝突問題，
查了一下網路，也的確蠻多人有類似的困擾。
我請AI同事列幾個方案：

• Vue + Tailwind CSS + 無頭 UI 組件
• Vue + Element Plus（增強主題）+ 最小化 Tailwind（用於 Element Plus 未涵蓋的實用程式）
• Vue + 自訂 CSS/SCSS（無框架）+ 最小化實用程式類別（如果需要）

由於這類型錯誤如果不從源頭處理，依照這幾個禮拜與AI同事合作的經驗，他很容易一直犯同樣錯誤。
因為這種錯誤程式不會提示出錯，只會在前端顯示時不在我們要的位置。
最後我決定使用AI同事的第一個方案去重構前端。

重構完還是沒有解決，看來不是這個問題。
中間各方嘗試包含使用其他AI分析，最後透過context7套件查找文件發現了問題。

AI同事雖然知道我是用Tailwind CSS v4.x版本，但他css使用v3.x的方式撰寫。
剛好這個套件在4.x的版本有大改動，舊的寫法無法通用導致錯誤。
如果這部分我還想繼續跟AI合作：
1.使用舊版本，因為AI同事只會舊版本
2.使用新版本，但每次我都要請AI同事去讀新版本使用文件，還要常常去堤防他突然某個地方用舊的用法導致出錯

以長遠考量，我決定降版本到3.x版本，著重於與AI同事順利合作為主。
告訴AI同事我的決定後，我透過context7提醒他去查看相關依賴調整，最後終於讓他正常顯示了
到這才知道，我一直沒看到AI同事真正設計的東西，大多都因為版本問題沒有正常顯示。

今天算是推進一點進度，接下來應該就會比較快了。
鐵人賽最後一個禮拜，希望最後能完成一個至少能使用的版本。

以下為今天的研究流程

先開始前的老樣子，請AI同事了解應用現況。
我給AI的指令:

@ai_context.md @README.md @軟體核心架構規劃.md @功能需求總覽.md   了解目前現況

在來請AI同事了解前端計畫。
我給AI的指令：

@plan_sim/TaskWhisker_Frontend_Development_Plan.md @plan_sim/wireframes_description.md @frontend_design_system.md ，這是前端計畫的文件，請仔細了解 

等AI同事了解整個進度後，我請他維修google登入logo圖案太大且離字太近的問題。
我給AI的指令：

我目前測試前端登入頁，google的圖案有點太大且與字有點太近，請給他一點距離讓他看起來看專業一點

AI同事修改了距離跟大小，但是畫面看起來沒有修正。
我懷疑是有其他設定限制了AI同事的調整，因此請他分析問題。
我給AI的指令：

沒有任何變化，請幫我分析是不是有什麼地方影響了這部分的設定

這次AI同事懷疑是快取的問題，因此他刪除快取後重新啟動，我檢查一下還是沒有變化。
因此我這次換一個策略，先請AI同事列出可能影響的原因，而不是直接讓他找是哪個原因。
我給AI的指令：

請針對我的前端系統，找出所有影響的原因

AI同事分析了一些原因，我請他告訴我該怎麼檢查問題。
我給AI的指令

已經重啟並清除瀏覽器快取，請告訴我該檢查瀏覽器哪個部份來分析問題原因  

AI同事得到我的一些回饋之後，發現可能是 element plus 套件影響了設定，導致有些布局看A套件，有些布局看B套件，有些混搭導致混亂。
我請AI同事分析現有套件是否必須，因為現在套件太多會互相干擾。
AI同事列出我目前使用的相關功能：

目前的設定包括：

• Element Plus： 一個全面的 Vue UI 組件庫。它有自己的預設樣式 (element-plus/dist/index.css) 和主題系統 (element-plus-custom.scss)。
• Tailwind CSS： 一個實用程式優先的 CSS 框架。它根據 HTML 中使用的類別生成 CSS。
• PostCSS： 一個使用 JavaScript 外掛程式轉換 CSS 的工具（Tailwind 使用它）。
• Vite： 一個捆綁所有內容的建置工具。

我覺得這樣互相干擾造成我很難插手，因為我不知道到底是哪邊影響，還有他們CSS的順序。
因此我請AI同事考慮重構方案，並留下最需要的套件。
我給AI的指令：

目前還在前期，請考慮重構方案。請參考目前我們所有前端需求功能。以最少的套件，哪個組合可以滿足所有需求，而不是這樣東一塊西一塊。

AI同事給了我三個選項：

• Vue + Tailwind CSS + 無頭 UI 組件
• Vue + Element Plus（增強主題）+ 最小化 Tailwind（用於 Element Plus 未涵蓋的實用程式）
• Vue + 自訂 CSS/SCSS（無框架）+ 最小化實用程式類別（如果需要）

看起來1跟3都可以解決我們的問題，2雖然部分解決，但不知道會有什麼影響。
上網查了一下網路上蠻多Element Plus與Tailwind衝突問題，大多都是提議關掉Tailwind的預設模式。
我看到有一篇專門解決問題的 Github，
我請AI同事去這篇文章了解如何解決，這樣就避免重構，也還是可以使用 Element Plus 。

本來幻想這樣就可以解決，可惜事情沒這麼美好，還是發生一樣的狀況。
最後避免為了一直發生一樣的麻煩，我覺得事情簡單化。
既然是 Element Plus 與 Tailwind 衝突，那我選擇用其中之一就好，因此我請AI同事重構。
我給AI的指令：

還是沒辦法解決，決定使用你的重構方案 移除 Element Plus 並清理 Tailwind 整合

結果移除了Element Plus，同樣的問題還是發生，看來誤判了。
我請出小幫手ChatGPT，他分析問題是:
雖然你已經移除了 Element Plus，並且組件也改用 純 HTML + Tailwind CSS，但瀏覽器仍然會套用一層「使用者代理程式樣式表 (User Agent Stylesheet)」。這是每個瀏覽器為了確保「沒有任何 CSS 的網頁」也能正常顯示而預設附帶的樣式。

為什麼 Google 標誌位置還是一樣？
UA 預設樣式還在生效
舉例：
會是 display: inline;
會有 padding, border, background
預設是 color: blue; text-decoration: underline;
如果你只靠 Tailwind 沒有覆寫掉這些規則，它仍然會影響排版。
你看到的「Google 標誌」位置相同，可能是因為 default inline/block 行為沒有被改變
預設是 inline，會和文字基線對齊。
如果你沒有用 Tailwind 的 block 或 inline-block 去調整，它還是照 UA 規則走。
Element Plus 移除後，不代表 UA 樣式消失
它只是移除了額外的 CSS library，但 UA 依然存在。

總之還是沒有效果，經過一連串的測試，包含呼叫context，最後終於測試出來了。
主要針癥結點是AI同事使用Tailwind v3.x的語法，但是我套件是 v4.x的版本。
而套件在這個大版本有許多大的變動，導致他建構的方式有問題。

這時我在思考，到底是使用舊版本還是新版本。
舊版本的好處是AI同事會下意識使用舊版本用法，如果使用舊版本會減少很多AI同事犯的錯誤，但就無法使用新版本的功能。

如果是以與AI合作的主題，看來是使用舊版本會比較好。
因為新版本的話我得一直提醒他去讀取文件使用新用法，又或者我自己下去寫，但這就不符合與AI合作的主題
因此，最後我決定使用舊版本來繼續實作前端。
我給AI的指令：

請幫我使用context7去查找 tailwind v3.x穩定的版本，修改成這個版本，並檢查相依賴的套件，改成相容的版本

AI同事會有一些權限的問題，因此我將他提供的指令手動執行，並請AI同事修一下部分錯誤。
結果這次我才真的看到AI同事設計的介面，之前看到的都是只有一半的設計。