Tachyons

原子化 CSS 运动的先驱级函数式工具库

原子化CSSFunctional CSS工具类经典方案

Tachyons 通过一套简洁且不可变的工具类影响了后来的 Tailwind CSS，但项目本身已长期不活跃。

Tachyons

经典 Functional CSS 工具库，原子化 CSS 的先驱，为人类设计的函数式 CSS。

技术简介说明

Tachyons 是由 Adam Morse（@mrmrs_）于 2014 年创建的函数式 CSS（Functional CSS）框架，是原子化 CSS 运动的先驱和奠基者之一。它的核心理念是通过大量预定义的、不可变的、单一用途的 CSS 类来构建界面，每个类只做一件事，类名简洁且具有语义（如 pa3 表示 padding all 3，fw6 表示 font weight 6）。

Tachyons 的设计哲学强调"为人类设计"——它的类名设计遵循一套严格的命名约定，使用缩写使类名尽可能短，同时保持可读性。这种设计直接影响了后来的 Tailwind CSS（Tailwind 的创始人 Adam Wathan 承认 Tachyons 对其设计思路的影响）。

Tachyons 还强调性能优先——它的输出是一个固定大小的 CSS 文件（约 10KB gzip），无论项目大小都使用相同的 CSS 文件，利用浏览器的缓存优势实现最佳性能。这种"一次构建，处处缓存"的理念在当时是极具前瞻性的。

遗憾的是，Tachyons 自 2018-2019 年以来已不再有活跃的新版本发布。虽然它在原子化 CSS 的历史上有着不可磨灭的贡献，但在 2025-2026 年，新项目已不再推荐使用 Tachyons，Tailwind CSS 已成为其精神继承者。

基本信息

官网：https://tachyons.io
GitHub：https://github.com/tachyons-css/tachyons
License：MIT
最新版本：v4.12.0（npm，2020 年 4 月）
主要维护者/公司：Adam Morse（@mrmrs_）
GitHub Stars：11.7k+
维护状态：⏸️ 不活跃（自 2020 年起无重大更新）
NPM 周下载量：约 89,100 次（2025 年数据）
现代 Fork：Tachyons-Neo（新增 CSS 变量、Grid 支持）

快速上手

安装

通过 npm

npm install tachyons

通过 CDN

<!-- 完整版 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css">
 
<!-- 开发版（未压缩） -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.css">

在 CSS 中引入

/* 方式1: 直接引入完整包 */
@import 'tachyons';
 
/* 方式2: 按需引入模块 */
@import 'tachyons/css/spacing';
@import 'tachyons/css/typography';
@import 'tachyons/css/colors';

基础配置

Tachyons 使用 Sass 变量进行配置，通过 tachyons-custom 包进行定制：

# 安装可定制版本
npm install tachyons-sass

// _variables.scss - 自定义设计令牌
$sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
$heading-font-family: $sans-serif;
 
// 间距 scale
$spacing-unit: 1rem;
$spacing-extra-small: $spacing-unit * 0.25;  // 0.25rem
$spacing-small: $spacing-unit * 0.5;          // 0.5rem
$spacing-medium: $spacing-unit;               // 1rem
$spacing-large: $spacing-unit * 2;            // 2rem
$spacing-extra-large: $spacing-unit * 4;      // 4rem
 
// 颜色
$blue: #357edd;
$green: #137752;
$dark-gray: #333;
$mid-gray: #555;
$light-gray: #eee;

最小示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css">
  <title>Tachyons 示例</title>
</head>
<body class="sans-serif pa4">
  <!-- 卡片组件 -->
  <div class="mw6 center bg-white br3 pa4 shadow-3">
    <h1 class="f2 fw6 dark-gray mb3">Hello Tachyons</h1>
    <p class="f5 mid-gray lh-copy mb4">
      Tachyons 是一个快速、模块化、可扩展的 CSS 工具库，
      专为创建响应式界面而设计。
    </p>
    <a href="#" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-blue">
      了解更多
    </a>
  </div>
 
  <!-- 响应式布局 -->
  <div class="cf">
    <div class="fl w-100 w-50-m w-33-l pa2">
      <div class="bg-light-gray br2 pa3">列 1</div>
    </div>
    <div class="fl w-100 w-50-m w-33-l pa2">
      <div class="bg-light-gray br2 pa3">列 2</div>
    </div>
    <div class="fl w-100 w-50-m w-33-l pa2">
      <div class="bg-light-gray br2 pa3">列 3</div>
    </div>
  </div>
</body>
</html>

核心概念与架构

Functional CSS 理念

Tachyons 是 Functional CSS 运动的开创者：

不可变类：每个类只做一件事，且永远做同一件事
无副作用：类之间不会互相影响
单用途约束：类名直接映射到一个 CSS 属性或一小组合属性
规模化设计：通过有限的设计令牌组合出无限界面

命名约定

Tachyons 使用独特的缩写命名系统：

缩写	含义	示例
`p`	padding	`pa3`（padding all 3）
`m`	margin	`mt2`（margin top 2）
`f`	font-size	`f4`（font size 4）
`fw`	font-weight	`fw6`（font weight 600）
`bg`	background	`bg-light-gray`
`ba`	border all	`ba b--solid`
`br`	border-radius	`br2`（border radius 2）
`w`	width	`w-50`（width 50%）
`h`	height	`h2`
`tt`	text-transform	`ttu`（uppercase）
`lh`	line-height	`lh-copy`

模块化架构

tachyons/
├── css/
│   ├── tachyons.css       # 完整文件
│   └── tachyons.min.css   # 压缩版
└── src/
    ├── _box-sizing.css
    ├── _background-size.css
    ├── _border-radius.css
    ├── _border-style.css
    ├── _border-width.css
    ├── _borders.css
    ├── _clears.css
    ├── _colors.css
    ├── _coordinates.css
    ├── _debug.css
    ├── _display.css
    ├── _flexbox.css
    ├── _floats.css
    ├── _font-family.css
    ├── _font-style.css
    ├── _font-weight.css
    ├── _forms.css
    ├── _heights.css
    ├── _hovers.css
    ├── _images.css
    ├── _letter-spacing.css
    ├── _line-height.css
    ├── _links.css
    ├── _lists.css
    ├── _max-widths.css
    ├── _measure.css
    ├── _media-queries.css
    ├── _negative-margins.css
    ├── _normalize.css
    ├── _opacity.css
    ├── _outlines.css
    ├── _overflow.css
    ├── _position.css
    ├── _skins-pseudo.css
    ├── _skins.css
    ├── _spacing.css
    ├── _tables.css
    ├── _text-align.css
    ├── _text-decoration.css
    ├── _text-transform.css
    ├── _type-scale.css
    ├── _typography.css
    ├── _utilities.css
    ├── _vertical-align.css
    ├── _visibility.css
    ├── _white-space.css
    └── _widths.css

响应式系统

Tachyons 使用移动优先的断点系统：

前缀	断点	说明
无	默认	移动端
`-ns`	≥ 30em	Not Small（平板）
`-m`	≥ 30em 且 < 60em	Medium（平板横屏/小桌面）
`-l`	≥ 60em	Large（桌面）

<!-- 响应式示例 -->
<div class="w-100 w-50-m w-33-l">
  <!-- 移动端 100%，平板 50%，桌面 33% -->
</div>

核心特性

极简类名：最短的 CSS 类名设计（如 pa3、fw6）
不可变工具类：每个类只做一件事，无副作用
固定 CSS 文件：~10KB gzip，利用浏览器缓存
模块化源码：每个功能一个文件，可按需引入
移动优先响应式：-ns、-m、-l 断点前缀
可定制设计令牌：通过 Sass 变量配置间距、颜色、字体
无障碍关注：默认包含 focus 样式
无 JavaScript 依赖：纯 CSS 方案

生态图

核心生态

包	说明
tachyons	核心 CSS 框架
tachyons-sass	Sass 版本（可定制）
tachyons-custom	自定义构建版本
react-tachyons	React 组件封装

Tachyons 模块化组件

Tachyons 的模块化设计意味着每个功能都是独立的 npm 包：

模块	说明
`tachyons-background-size`	背景尺寸
`tachyons-border-radius`	圆角
`tachyons-colors`	颜色系统
`tachyons-flexbox`	Flexbox 布局
`tachyons-font-weight`	字重
`tachyons-spacing`	间距系统
`tachyons-type-scale`	字号 scale

社区工具

tachyons-build：自定义构建工具
Tachyons to Tailwind 转换工具：社区迁移工具

关键依赖

无外部依赖：Tachyons 核心是纯 CSS，无 JavaScript 依赖
可选依赖：Sass（用于自定义构建）

适用场景

静态网站和博客（固定 CSS 文件缓存策略天然适合）
邮件模板开发（Tachyons 的类名设计对邮件客户端友好）
学习原子化 CSS 起源（理解 Functional CSS 的设计哲学）
小型项目（无需构建工具，CDN 直接引入）
设计系统原型（使用设计令牌快速原型）
遗留 Tachyons 项目维护（已有项目继续使用）
性能敏感场景（固定大小 CSS + 浏览器缓存策略）

开发与工程化

开发流程

# CDN 开发（最简单）
# 直接在 HTML 中引入 CDN 链接
 
# 自定义构建
npm install tachyons-sass
# 编辑 Sass 变量
# 编译输出自定义 CSS

构建配置

// 自定义构建入口
@import 'tachyons-sass/tachyons';
 
// 或按需引入
@import 'tachyons-sass/scss/_spacing.scss';
@import 'tachyons-sass/scss/_typography.scss';
@import 'tachyons-sass/scss/_colors.scss';
@import 'tachyons-sass/scss/_flexbox.scss';

CI/CD 集成

# 简单的静态站点构建
- name: Build
  run: |
    npm ci
    # 如果需要自定义构建
    npx sass src/custom.scss dist/tachyons-custom.css --style=compressed

性能与安全

性能特点

固定 CSS 文件：~10KB gzip，所有页面共享同一文件
浏览器缓存友好：CSS 文件不会随项目增长而变大
零运行时开销：纯 CSS，无 JavaScript
无构建工具依赖：可直接使用 CDN

性能对比

指标	Tachyons	Tailwind CSS v4
CSS 文件大小	~10KB（固定）	2-10KB（按需生成）
构建工具	不需要	需要
浏览器缓存	最优（固定文件）	好（变化时才更新）
大项目输出	10KB	随项目增长（通常 < 20KB）

优化建议

生产环境使用 minified 版本（tachyons.min.css）
自定义构建时只引入需要的模块
利用 CDN 缓存减少加载时间
设置合理的 Cache-Control 头

安全注意事项

项目不活跃，可能存在未修复的依赖漏洞
CDN 引入时使用 SRI（Subresource Integrity）校验
自定义构建时注意 Sass 依赖版本

技术对比

对比项	Tachyons	Tailwind CSS v4	UnoCSS	Basscss
最新版本	v4.12.0（停止更新）	v4.3.2	v66.7.4	v8.1.0
维护状态	⏸️ 不活跃	✅ 活跃	✅ 活跃	⏸️ 完成
CSS 文件	固定 ~10KB	按需生成	按需生成	模块化按需
构建工具	不需要	需要	需要	需要
可定制性	低（Sass 变量）	极高	极高	中等
响应式	✅（-ns/-m/-l）	✅（sm:/md:/lg:）	✅	✅
类名风格	极简缩写（pa3）	描述性（p-3）	兼容多种	简洁（p1）
社区规模	小（11.7k ★）	最大（95.8k ★）	中等（18.9k ★）	小（5.9k ★）
生态丰富度	低	极高	高	低

最佳实践

使用建议

CDN + SRI：生产环境使用 CDN 时添加 SRI 校验
按需引入：自定义构建时只引入需要的模块
保持一致性：遵循 Tachyons 的命名约定，不添加自定义类
组件化：将重复的类组合提取为组件

常见陷阱

不使用自定义类：Tachyons 的设计哲学是纯工具类，混用自定义类会破坏一致性
忽视响应式：记得使用 -ns、-m、-l 断点前缀
忽略度量值：measure 类控制行宽，对排版很重要
与 Tailwind 混用：两者语法不兼容，不应在同一项目中使用

技术局限与边界

已知限制

项目不活跃：自 2019 年起无重大更新，不再适应现代 CSS 特性
无可变分组：不支持 hover:(...) 等现代语法
无按需生成：始终加载完整 CSS 文件
无深色模式：不原生支持暗色模式
无容器查询：不支持现代 CSS 容器查询
可定制性有限：相比 Tailwind/UnoCSS 的配置灵活性较低
生态萎缩：社区工具和插件不再更新

不适用场景

新项目开发：建议使用 Tailwind CSS v4 或 UnoCSS
需要现代 CSS 特性：深色模式、容器查询、CSS 变量等
大型团队协作：生态太小，新成员可能不了解
需要丰富组件库：没有活跃的组件生态系统

迁移建议

Tachyons → Tailwind CSS v4：最大的生态和最活跃的发展
Tachyons → UnoCSS：如果需要更好的开发体验
迁移工具：社区有 Tachyons to Tailwind 转换工具

学习资源

官方文档：https://tachyons.io（包含完整的类名参考）
Tachyons 组件库：https://tachyons.io/components/（官方组件示例）
GitHub 仓库：https://github.com/tachyons-css/tachyons
Adam Morse 的演讲：
- Tachyons CSS Toolkit — Devshop London 2016
- 272: Functional CSS and Tachyons
文章：
- Switching to Functional CSS
- Full re-write in 10 days with tachyons
对比文章：
- Tailwind CSS vs. Tachyons
社区：
- GitHub Issues：https://github.com/tachyons-css/tachyons/issues

2026 年现状

现代 Fork：Tachyons-Neo 🆕

值得注意的是，社区出现了 Tachyons-Neo（tachyonsneo.com）——一个由 Bijan Rahnema（@gobijan）/ Screen Island 维护的现代分支，增加了：

CSS 变量 Token 支持
CSS Grid 布局层
更现代的视口单位默认值
更精细的色彩步进

Tachyons-Neo 有独立的文档站和 GitHub 仓库，是目前 Tachyons 生态中最活跃的延续。

发展趋势

被 Tailwind CSS 超越：Tailwind CSS 继承了 Tachyons 的 Functional CSS 理念并大幅扩展
Tachyons-Neo 延续精神：现代 fork 为 Tachyons 理念注入了新活力
存量使用稳定：npm 下载量保持稳定，主要来自存量项目和邮件模板场景

社区活跃度

GitHub Star 11.7k（大部分是历史积累，自 2020 年的 ~9,700 持续增长）
Issue 和 PR 基本无人响应（76 个未解决的 Issue）
无官方 Discord/论坛等活跃社区

历史贡献

Tachyons 对前端 CSS 的深远影响：

开创 Functional CSS 运动：定义了"实用优先"的 CSS 范式（2014 年）
影响 Tailwind CSS：Adam Wathan 承认受 Tachyons 启发创建了 Tailwind CSS
推动原子化 CSS 普及：证明了工具类 CSS 的可行性和工程价值
设计令牌理念：通过 scale 系统（spacing scale、type scale）推广了设计令牌的概念
性能导向：固定大小 CSS 文件的缓存策略启发了后来的按需生成方案
学术研究认可：ResearchGate 2022 年的研究认为 Tachyons 在性能和简洁性方面表现优秀

Tachyons

Tachyons

技术简介说明

基本信息

快速上手

安装

基础配置

最小示例

核心概念与架构

Functional CSS 理念

命名约定

模块化架构

响应式系统

核心特性

生态图

核心生态

Tachyons 模块化组件

社区工具

关键依赖

适用场景

开发与工程化

开发流程

构建配置

CI/CD 集成

性能与安全

性能特点

性能对比

优化建议

安全注意事项

技术对比

最佳实践

使用建议

常见陷阱

推荐模式

技术局限与边界

已知限制

不适用场景

迁移建议

学习资源

2026 年现状

最新版本

现代 Fork：Tachyons-Neo 🆕

发展趋势

社区活跃度

历史贡献