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

- Link: https://www.ixiqin.com/2021/02/14/a-small-skills-enhance-your-writing-code-in-tailwindcss-efficiency/
- Published: 2021-02-14T22:33:59+08:00
- Author: 白宦成

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

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

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

![](https://postimg.aliavv.com/mbp2021/598n6.png)

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

![](https://postimg.aliavv.com/mbp2021/z8h13.png)

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

## 总结

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