简介
tachyons-build-css 是一个基于 tachyons 样式框架的 CSS 类库，它提供了大量的 CSS 类来简化前端页面样式的编写。使用 tachyons-build-css 可以避免我们写大量的 CSS 样式代码。
安装
我们可以使用 npm 包管理器来安装 tachyons-build-css。
npm install tachyons-build-css --save
安装完成后，在我们的项目中引入 tachyons.css 文件即可。
<link rel="stylesheet" href="node_modules/tachyons-build-css/css/tachyons.css">
使用
tachyons-build-css 中的 CSS 类非常简单，类名都是有意义的英文单词或缩写。
基础用法
我们可以使用 tachyons-build-css 中提供的 CSS 类来修改文字颜色、字体大小、背景颜色等样式。例如：
<h1 class="f1 red">Hello World!</h1>
上述代码中，f1 是一个设置字体大小的类，red 是设置字体颜色的类。
布局用法
tachyons-build-css 还提供了多个布局相关的 CSS 类，这些类可以轻松实现常见的布局效果。例如：
<div class="flex justify-center items-center">
<h1 class="f1">Hello World!</h1>
</div>上述代码中，flex 是一个设置为 Flex 布局的类，justify-center 和 items-center 是分别用于水平和垂直居中的类。
响应式用法
tachyons-build-css 还提供了许多响应式样式，这些样式可以根据屏幕尺寸自动调整。例如：
<div class="dn db-ns">...</div>
上述代码中，.dn 设置元素在非响应式情况下默认为不可见，.db-ns 设置元素在屏幕尺寸大于等于 48em（响应式媒体查询的阀值）时显示。
总结
tachyons-build-css 是一个非常优秀的 CSS 类库，它提供了大量有意义的 CSS 类，可以轻松实现常用的样式效果。与手写 CSS 相比，使用 tachyons-build-css 可以大幅提高开发效率。建议大家掌握 tachyons-build-css 的使用方法，以便更好地应用于项目当中。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ------------
----- ---------------- --------------------------------------------------------
-------
------
---- ----------- -------------- ------------ --------
--- --------- ---------- -----------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69078