TailWindCss-只能用真香来形容它
TailWindCss实在太香了,使用起来完全无压力,本博客刚刚使用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前段开发修炼之道》