Cusps — Trend Guide— 趋势指南
Tools工具 / 效率Rising正当红

Tailwind CSSTailwind CSS

Inter / Inter

Utility-first CSS — the shortest path from design to shipped front-end.原子化 CSS——从设计到上线前端的最短路径。

Rising上升 · still early · 还早Are.na 592 blocksDiscipline工种 Tools工具 / 效率
01 — Signal & timing01 — 信号 · 时机
Live · free实时 · 免费

Where it is in its life它走到哪一步了

Emerging萌芽
Rising上升
Peaking见顶
Fading退潮
Are.na · reference boardAre.na · 参考板updated 2026-07-20更新于 2026-07-20
592 blocks592 块
Creative press · recent创意刊物 · 近期Design · fashion · packaging press (12 feeds)设计 · 时尚 · 包装刊物(12 源)
0 mentions0 次提及
Momentum · npm动量 · npmnpm installs, trailing quarternpm 装机 · 近一季度
+17%

Still climbing, not yet default. The Are.na reference board is growing (592 blocks), momentum +17%. A real window before it’s everywhere.还在上升,尚未成为默认。Are.na 参考板在增长(592 块),动量 +17%。真正铺开之前还有一个窗口。

Weekly watchlist每周看板live实时

Variable Font Motion可变字体动效1232 ·
Risograph · Print GrainRiso / 印刷颗粒1120 ·
Wordmark Minimalism极简字标917 ·
Hand-Lettering手写手绘字890 ·
Muted Earth褪色大地842 ·
Contrast Display Serif高对比展示衬线721 ·
Live Are.na snapshot across Cusps trends. In Pro this becomes a weekly momentum board with week-over-week deltas, so you see what’s rising before it’s obvious.Cusps 各趋势的 Are.na 实时快照。Pro 版会变成每周动量看板,带周环比涨跌,让你在别人看清之前就看到什么在涨。
TAKE IT — production-ready拿走即用 — 生产级

Ship it, don’t just see it不止看见,直接拿走

grab the palette and type as tokens for your project — CSS variables, Tailwind, or W3C design tokens. All free.把配色和字体作为 tokens 拿进项目——CSS 变量、Tailwind、W3C design tokens。全部免费。

02 — Overview02 — 概览

What it is, and why now是什么,为什么现在

Tailwind CSS builds interfaces from small utility classes instead of hand-written stylesheets. It’s become the default styling layer for a large share of new web projects.Tailwind CSS 用一堆小的工具类来搭界面,而不是手写样式表。它已经成为很大一部分新网页项目的默认样式层。

03 — In practice03 — 实战

When to reach for it什么时候用它

Use for用在

  • Building UI fast
  • Design systems
  • Design-to-code
  • 快速搭 UI
  • 设计系统
  • 设计到代码

Avoid for别用

  • Needs deep semantic / custom CSS
  • No-build static sites
  • 需要极致语义化/定制的
  • 纯静态无构建的
04 — How it works04 — 怎么运作

Adopting it怎么上手

Map your design tokens — colours, spacing, type scale — straight into the Tailwind config, then compose with utilities and extract components once patterns repeat. Add a component library rather than reinventing buttons and inputs.把你的设计 token——颜色、间距、字号——直接映射进 Tailwind 配置,再用工具类组合,模式重复了就抽成组件。加个组件库,别重造按钮和输入框。

05 — Where to look05 — 去哪儿看

Sources, not screenshots是来源,不是截图

Curated links to where this actually lives and gets documented — live boards for reference, editorial for pitch language, galleries to gauge saturation. We link out and credit rather than re-host anyone’s work.精选链接,指向这个方向真正活着、被记录的地方——实时参考板、给提案话术的编辑内容、判断饱和度的画廊。我们只链接并署名,不搬运任何人的作品。

06 — How to build it06 — 怎么做出来

How to start怎么开始

  1. Utility classes for fast layout
  2. pair with shadcn / component libraries
  3. map design tokens straight to classes. Shortest path from design to front-end.
  1. 原子类快速排版
  2. 配 shadcn/组件库
  3. 设计 token 直接映射到类。设计师转前端的最短路径。
Tools —工具 — tailwindcss, shadcn/ui or daisyUI, a tokens-first config.tailwindcss、shadcn/ui 或 daisyUI、一套 token 先行的配置。

It’s all free全部免费

Every guide, the live timing, palettes and example images — all free. Get the weekly “what’s rising” email so you never miss a move.每份指南、实时时机、配色和范例图——全都免费。订阅每周“什么在涨”邮件,不错过任何动向。