例子

SACSS

Static Atomic CSS

1<div class="bc_fff pt16 pb16 pl16 pr16 dif br8">
2  <img class="mr8 w48 h48" src="./logo.svg"/>
3  <dl class="f1 fs14 c_000">
4    <dt class="fw700 fs16">SACSS</dt>
5    <dd>Static Atomic CSS</dd>
6  </dl>
7</div>

复杂例子

"Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny."

Sarah Dayan

Staff Engineer, Algolia

<figure className="bc_fff tac pt24 pb24 pl24 pr24 br8 mw480 mla mra">

<img className="w128 h128 br100% db mla mra mb16" src="/img/avatar.jpg" alt="avatar" width="128" height="128"/>

<div className="mb16 tac pt8 pb8">

<blockquote>

<p className="fs18 fw700 lh28 c_m"> "Tailwind CSS is the only framework that I've seen scale on large teams.

It’s easy to customize, adapts to any design, and the build size is tiny."

</p>

</blockquote>

</div>

<figcaption className="fs16 lh24 fw500">

<div className="c_info">Sarah Dayan</div>

<div className="c_s">Staff Engineer, Algolia</div>

</figcaption>

</figure>

以下是 Tailwind CSS 官方的图片示例。