本文是在实际项目开发中使用Tailwindcss的感受，给还未决定的选择使用Tailwindcss的朋友们一些参考。
我十分鼓励大家选择Tainwindcss作为Vue项目的前端和后台的首选css工具。
Tailwindcss已经成为我的必须工具。
2021/3/4 更新
在自己开发多个项目以后，对TailwindCSS感受修正。1、是和快速开发啊，尤其是网站的手机和电脑适配项目。2. 如果你是开发中长期项目，或者注重细节、交互，建议还是自己写CSS。3、TailwindCSS被我作为写CSS的工具参考呢
为什么我觉得用Tailwindcss会很舒服
1. 直接在vue中写css命令，省去了繁琐的css命名，省去了来回跳转页面编辑，省去了写一堆CSS的痛苦
Before
<div class="bottomNav"></div>
<style scoped>
.bottomNav-cartfooter {
position: fixed;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
padding-left: 21.066667vw;
background-color: rgba(61, 61, 63, 0.9);
height: 12.8vw;
z-index: 1000;
}
</style>
After
写起来实在是太爽了！
其实就这一个原因就够了
2. Tailwindcss是为移动而生，非常简单就可以将适配写好，超级简单
一行代码搞定手机、平板、电脑的支持。
<div class="flex sm:inline-flex md:block lg:hidden xl:flex ...">
<!-- ... -->
</div>
如官网示例
3. 对动态的支持，如Hover
<button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white...">
Hover me
</button>
类似Hover，Transition 也是很容易实现，请参见官网：
4. 总结
- 您肯定会为繁琐的写css感到郁闷，框架（如ElementUI或者是Bootstrap）实际过程中限制太多，定制是一件很郁闷的事情。选择Tailwindcss的朋友本来就会选择更多的定制化css。
- 虽然每个部分都要写class="fixed w-full..."，但实际上很多项目在css方面并没有多需要封装的需求，对于中小型项目是足够的。
- 我们本来就更应该将更多的精力放到逻辑和功能的实现，CSS实现精美的展示应该越便捷越好。
- 对移动端的非常快速的开发支持，对开发者是最大的福音。再也不用头疼开发需要适配的网站了。
2. Tailwindcss的资源
- 官网https://tailwindcss.com/
提供了便捷的查找工具
2.https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/alerts
需要购买，才能够解锁更多代码。但实际上用一些基本的就够了。之所以推荐，是因为免费的一些代码写法还是很经典的。
- 自动生成Grid的代码 https://tailwindgrids.com/#/
