昨天我們成功在瀏覽器中看見了 Vite + React 的預設歡迎畫面，證明了雲端開發環境的順暢度。今天我們要來「打掃房間」，把不需要的預設檔案清空，並導入 Tailwind CSS 這個強大的實用優先 (Utility-first) CSS 框架，為後續的醫療系統介面開發做好準備。

Step 1：清空預設檔案與樣式
請在左側檔案總管進入 src 資料夾，進行以下清理工作：

1. 刪除 App.css（因為我們將統一使用 Tailwind 來管理樣式）。
2. 打開 index.css，把裡面的預設內容全部刪除。
3. 打開 App.jsx，將原本包含計數器的程式碼清空，替換成最乾淨的元件結構：
   

Step 2：安裝 Tailwind CSS 相關套件
點擊下方終端機 (Terminal)，輸入以下指令安裝穩定的 Tailwind v3 及其依賴套件：
npm install -D tailwindcss@3.4.17 postcss@8.4.38 autoprefixer@10.4.19

安裝完成後，初始化 Tailwind 設定檔：
npx tailwindcss init -p

Step 3：設定 Tailwind 掃描路徑
執行完上一步驟後，專案根目錄會自動產生一個 tailwind.config.js 檔案。打開它，並將內容設定如下，告訴 Tailwind 該去哪些檔案裡尋找我們寫的 class：

Step 4：引入核心樣式並測試
最後，回到 src/index.css，貼上 Tailwind 的三行核心指令：
@tailwind base;
@tailwind components;
@tailwind utilities;

他們分別的功能為:
@tailwind base;：注入 Tailwind 的基礎樣式（Preflight）。這會重置瀏覽器的預設樣式（例如清除標題的粗體、列表的點點、圖片邊距等），讓所有瀏覽器有一致的乾淨起跑點。

@tailwind components;：注入 Tailwind 的元件樣式。這通常用來放一些預先定義好的複雜元件類別（例如按鈕、卡片等，雖然在現代開發中較常直接用 utility 類別組合）。

@tailwind utilities;：注入 Tailwind 所有的工具類別（Utility classes）。這包含了每天都會用到的幾千個排版與樣式小工具，例如 flex、text-center、bg-blue-500 等。

此圖為成功畫面