去年很火的 Tailwind CSS 是何方神圣，到底是 Atomic CSS 余孽的卷土重来还是真的有点东西。Tailwind CSS 如何帮助我们建立界面样式到设计语言的连接，Utility-first 的 CSS 工作流是怎样的，以及，如何基于 Tailwind CSS 为自己的团队定制一套舒服的 CSS 框架。

https://mp.weixin.qq.com/s/ziTWcfPwrz1fyzpv4j3xVg

XX开发 // tailwind.config.js
{
theme: {
extend: {
colors: {
blue: {
400: ‘#2680EB’
}
}
}
}
}

// css
@layer components {
.cta-background-color {
@apply bg-blue-400;
}
.button-cta-background-color {
@extend .cta-background-color;
}
}

// html
 通过 tailwind.config.js 把 Design Token 与值做关注点分离

通过 tailwind 的 layer directive 把 Design Token 与 Alias token 做连接

创建出 Component-specific Token，通过类名暴露给 HTML 组件使用

有了 BEM，写出来的 HTML 会不那么欠揍了

欠揍写法

  2. <ul class="application-list">
  3.   <li>
  4.     <a href="/yuyan/yuyanAssets">
  5.       <img src="https://gw.alipayobjects.com/zos/basement_prod/9a7a9c64-01ee-45ca-a615-6063a24f70a9.svg" />
  6.       <div>
  7.         <h4>yuyanAssets</h4>
  8.         <span>雨燕前端应用</span>
  9.       </div>
  10.     </a>
  11.   </li>
  12. </ul>
  2. <ul class="application-list">
  3.   <li class="application-list__item">
  4.     <a class="application-list__link" href="/yuyan/yuyanAssets">
  5.       <img class="application-list__img" src="https://gw.alipayobjects.com/zos/basement_prod/9a7a9c64-01ee-45ca-a615-6063a24f70a9.svg" />
  6.       <div class="application-list__content">
  7.         <h4 class="application-list__title">yuyanAssets</h4>
  8.         <span class="application-list__description">雨燕前端应用</span>
  9.       </div>
  10.     </a>
  11.   </li>
  12. </ul>
  1. .application-list {
  2.   list-style: none;
  4.   &__item {
  5.     background: #fff;
  6.   }
  8.   &__link {
  9.     display: block;
  10.     padding: 18px 22px;
  11.   }
  13.   &__img {
  14.     display: block;
  15.     width: 38px;
  16.     height: 38px;
  17.     float: left;
  18.   }
  20.   &__content {
  21.     display: inline-block;
  22.   }
  24.   &__title {
  25.     color: #314659;
  26.     font-weight: 600;
  27.     margin: 0;
  28.   }
  30.   &__description {
  31.     color: #697b8c;
  32.     font-size: 12px;
  33.   }
  35. }