一个小技巧,提升你用 TailwindCss 写代码的效率

TailwindCSS 是我目前比较喜欢使用的 CSS 框架,组件优先的设计思路可以让我更好的完成产品原型的建设。

而 TailWindCSS 的一个问题就是对于文档十分的依赖,你需要对比着文档来写样式,才能够写出自己想要的样式,比较麻烦。不过,最近写代码的时候,我发现了一个好办法,可以很好的写出我们想要的样式。

这个办法就是,使用浏览器自带的 DevTools 中的「元素类」这个功能,来调试样式。

598n6

操作的路径也非常简单,打开浏览器的开发者工具,选择元素一栏,在其中找到你要调试的元素,并在右侧的属性列表中勾选开启元素类(.cls),你就可以在下方的样式元素类输入框中,输入关键词,来获取到当前页面支持的样式,从而可以查看不同的类会对组件产生的效果。

z8h13

通过这样的技巧,你可以很轻松的完成样式的选择。在完成调试后,只要把你需要的样式写入到组件内,就可以将你调试好的样式固化到你的代码中,从而完成你的工作。

总结

借助浏览器自带的元素类功能,你可以很轻松的完成基于 TaildwindCss 的样式编写。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注