Tailwind Lab Pro 🎨

這是一個專為開發者設計的 Tailwind CSS 可視化樣式配置工具。透過直觀的介面，您可以快速調整元件在不同狀態（Normal, Hover, Active, Focus）下的樣式，並即時預覽效果，最後一鍵複製精簡後的 Utility Classes。

✨ 特色功能

• 多狀態配置：同時管理 Normal、Hover、Active 與 Focus 四種狀態的樣式。
• 全方位屬性調整：
  • 背景顏色 (Background)
  • 文字顏色、大小、粗細 (Typography)
  • 邊框顏色、寬度 (Border)
  • 圓角 (Radius) & 透明度 (Opacity)
• 即時預覽 (Live Preview)：中央畫布即時呈現互動效果，所見即所得。
• 智慧代碼輸出：內建去重邏輯，自動過濾掉與預設狀態重複的樣式，產出最乾淨的 HTML class 字串。
• 隨機靈感：提供隨機配色功能，快速尋找設計靈感。

🛠 技術棧

• Core: React 19
• Build Tool: Vite 7
• Styling: Tailwind CSS v4
• Icons: Lucide React

🚀 快速開始

1. 複製專案

   git clone https://github.com/your-username/tailwind-lab.git
   cd tailwind-lab

2. 安裝依賴

   npm install

3. 啟動開發伺服器

   npm run dev

4. 開啟瀏覽器 前往 http://localhost:5173 開始使用。

💡 開發筆記

動態 Class 與 Safelist

為了讓 Tailwind CSS 能正確編譯動態生成的顏色（例如 bg-blue-500 到 bg-red-500 的切換），本專案使用了一個預先生成好的 safelist.js 檔案來確保所有顏色組合都能被正確掃描與編譯。

智慧輸出邏輯 (Smart Deduplication)

在導出代碼時，系統會自動比較 Hover/Active/Focus 狀態與 Normal 狀態的差異。只有當屬性值改變時（例如 Hover 時背景變色），才會輸出對應的修飾符（hover:bg-...），確保生成的代碼簡潔高效，方便直接複製到專案中使用。

📝 License

MIT

---

Designed with ❤️ for developers.