問題
TailwindCSS 框架為我們提供了大量默認的類和屬性，而且開發者也能夠自定義類和配置。
對于初學者來說，這些配置其實是比較復雜的，這也是tailwindcss最大的入手成本，開發者的記憶負擔和心智負擔也都比較大。
有沒有辦法能夠直觀的看到項目中實際有效的類和屬性呢？
工具
NPM包
tailwind-config-viewer
https://npm.devtool.tech/tailwind-config-viewer
使用步驟
- 安裝npm依賴
pnpm install tailwind-config-viewer
或
pnpm add tailwind-config-viewer
- 新增
package.json中 script 命令
"scripts": {"tailwind-config-viewer": "tailwind-config-viewer -o"
}
- 啟動tailwindcss viewer
npm run tailwind-config-viewer
- 訪問localhost:3000
如果你想直接查看
TailwindCSS默認的配置效果，可以嘗試訪問鏈接https://rogden.github.io/tailwind-config-viewer/
開發的時候可以直接在頁面上直觀的看到樣式的效果，以及如果能夠定位自己設置的樣式到底是不是正確的，到底存不存在。
- 嘗試自定義theme color，比如新增一個自定義customColor顏色
// tailwind.config.jsmodule.exports = {...theme: {colors: ({ colors }) => {return { customColor: "red", ...colors };}}
};
相關原創文章推薦
- 在前端項目中開始使用 TailwindCSS
- TailwindCSS 如何配置默認單位為px
- TailwindCSS 多主題色配置
- TailwindCSS 支持文本文字超長溢出截斷、文字文本省略號
- TailwindCSS 如何設置 placeholder 的樣式
- TailwindCSS 如何處理RTL布局模式
- Tailwindcss 配置檢查器 - 可視化查看tailwindcss config最終效果
)
)
)
)