Tailwind CSS配置生成工具
免费的在线Tailwind CSS配置生成工具，无需安装。具有可视化编辑功能的tailwind.config.js配置生成工具。
關於 Tailwind 設定產生器
本工具透過簡單的表單產生可直接使用的 Tailwind CSS 設定檔，讓你無需手寫 JavaScript。設定類別前綴、切換 important 旗標，並列出 Tailwind 應掃描的內容路徑。你可以新增自訂顏色權杖和字體家族，產生器會把它們組裝成整齊的 theme.extend 區塊。所有內容會彙整成一個 tailwind.config.js，方便直接複製到專案中。
使用方法
1. 在「基本」分頁中設定前綴、important 旗標和內容路徑 2. 在「顏色」分頁中新增每個自訂顏色的名稱和值 3. 在「字體」分頁中新增每個字體家族及其逗號分隔的字體堆疊 4. 開啟「輸出」分頁並點擊「產生」 5. 檢查檔案，然後「複製」到你的專案中
最佳效果建議
每行寫一個內容路徑，以便 Tailwind 掃描正確的檔案來收集類別名稱。自訂顏色會變成工具類（如 bg-primary 或 text-brand），字體項目會變成 font-sans 或你選擇的任意名稱。空白部分會被自動省略，即使你只填了顏色或字體，產生的檔案依然整齊。輸出採用現代 ESM export 格式，頂端帶 Tailwind 型別提示。
▶prefix 選項有什麼作用？
它在每個 Tailwind 工具類前加上自訂前綴，例如前綴為 tw- 時 bg-red-500 會變成 tw-bg-red-500。有助於避免與其他 CSS 衝突。
▶important 旗標是什麼？
啟用後，Tailwind 工具類會使用 !important 旗標以覆寫其他樣式。除非確實需要該覆寫行為，否則請關閉。
▶內容路徑如何使用？
它們告訴 Tailwind 掃描哪些檔案來收集類別名稱，從而只產生你實際用到的 CSS。每行一個 glob 模式，例如 ./src/**/*.{js,ts,jsx,tsx}。
▶如何新增字體家族？
在「字體」分頁輸入名稱（如 sans）和逗號分隔的字體堆疊（如 Inter, system-ui, sans-serif）。產生器會把它拆分為設定中的陣列。
▶輸出是什麼格式？
一個使用 ESM export default 語法的 tailwind.config.js 檔案，第一行帶 Tailwind 型別註解。僅包含你填寫過的部分。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。