简介
tachyons-debug-children 是一个基于 tachyons 的 npm 包，用于快速且方便的为页面中的子元素添加调试样式。
安装
使用 npm 安装 tachyons-debug-children：
npm install tachyons-debug-children
使用
在使用 tachyons-debug-children 时，需要先引入 tachyons 的样式表，在此基础上再引入 tachyons-debug-children 的样式表。
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css"> <link rel="stylesheet" href="path/to/tachyons-debug-children.css">
然后，在需要添加调试样式的子元素上添加 debug-children 类名即可。例如，以下代码给所有的 div 添加了调试样式：
<div class="debug-children"> <div>Hello World</div> </div>
示例代码
以下是一个使用 tachyons-debug-children 的完整示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------ ----------
----- ---------------- -------------------------------------------------------
----- ---------------- -------------------------------------------
-------
------
---- -----------------------
---- -------------- ----- -----
--- --------- ---------- ----------
-- --------- --------- -- - ---- ---- --- ----------------------------
----
-------- ------
-------- ------
-------- ------
-----
------
------
-------
-------深入学习
tachyons-debug-children 是基于 tachyons 构建的。tachyons 是一个轻量级的 CSS 框架，旨在用最少的代码提供一组灵活、模块化的样式。
如果你想要深入学习 tachyons，可以访问官网：http://tachyons.io/。
指导意义
tachyons-debug-children 提供了一种快捷的调试子元素样式的方法。在开发过程中，由于嵌套关系很多，调试样式很难写对，使用 tachyons-debug-children 可以方便地定位子元素样式问题。
同时，tachyons-debug-children 也给我们提供了一个思路，即在开发中，为了更好的调试和排查问题，可以考虑添加临时样式或类名，以达到调试的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c2a81e8991b448e5be5