【TailwindCSS】在Vue项目开发中使用Tailwind

2020-09-18 本文已影响0人度一特

本文是在实际项目开发中使用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实现精美的展示应该越便捷越好。
对移动端的非常快速的开发支持，对开发者是最大的福音。再也不用头疼开发需要适配的网站了。