厦门专业网站建设团队,中信建设有限责任公司湖北分公司,中国建设银行官网个人登录,2023营业执照年检问题
TailwindCSS 框架为我们提供了大量默认的类和属性#xff0c;而且开发者也能够自定义类和配置。
对于初学者来说#xff0c;这些配置其实是比较复杂的#xff0c;这也是tailwindcss最大的入手成本#xff0c;开发者的记忆负担和心智负担也都比较大。
有没有办法能够…问题
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 };}}
};相关原创文章推荐
在前端项目中开始使用 TailwindCSSTailwindCSS 如何配置默认单位为pxTailwindCSS 多主题色配置TailwindCSS 支持文本文字超长溢出截断、文字文本省略号TailwindCSS 如何设置 placeholder 的样式TailwindCSS 如何处理RTL布局模式Tailwindcss 配置检查器 - 可视化查看tailwindcss config最终效果
