马克笔记

127

Work

具体如何使用，这些都是基础功，随便看下文档就能入手。不做过多解释了

传统写法与tailwindcss写法对比

组装一个简单的button

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>
//  bg-blue-500 背景色蓝色500
//  hover:bg-blue-700 经过状态背景色蓝色700
// text-white 字体颜色白色
//  font-bold 字体加粗
// py-2 y轴-0.5rem内边距
// px-4 x轴-1rem内边距
// rounded 圆角0.25rem大小

提取组件使用

<!-- 组装前 -->
<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
  Click me
</button>

<!-- 组装后 -->
<button class="btn btn-green">
  Button
</button>

<style>
  .btn {
    @apply py-2 px-4 font-semibold rounded-lg shadow-md;
  }
  .btn-green {
    @apply text-white bg-green-500 hover:bg-green-700;
  }
</style>

使用心得体会

如果老一点的前端，可能听说过原子类css 点击查看2013年知乎讨论。

但是TailWindCss结合postcss是真的香。解决了很多原子类存在的缺点。

搭配现在都是组件开发模式。再也不像以前修改一处，批量替换那么繁琐了。大大提高了开发趣味性

完全可以自由任意组装自己的ui框架，但是不推荐组装过渡，组装过渡后，又失去了自己组装的乐趣了

后记

历史总是循环的～～～

虽然这本书出版好久了。但是还是推荐每个人阅读一遍这本书《编写高质量代码 Web前段开发修炼之道》