问题
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.js
module.exports = {
...
theme: {
colors: ({ colors }) => {
return { customColor: "red", ...colors };
}
}
};
相关原创文章推荐
- 在前端项目中开始使用 TailwindCSS
- TailwindCSS 如何配置默认单位为px
- TailwindCSS 多主题色配置
- TailwindCSS 支持文本文字超长溢出截断、文字文本省略号
- TailwindCSS 如何设置 placeholder 的样式
- TailwindCSS 如何处理RTL布局模式
- Tailwindcss 配置检查器 - 可视化查看tailwindcss config最终效果
