使用tailwindcss开发山之泉国产品牌官网

使用tailwindcss开发体验记录

一些学习记录

tailwind给出的一些数值大小都是固定的，像是一些枚举

例如：

w-1，表示 宽度是一个单位，一个单位在tailwindcss里是 1/4 rem。1rem 默认是4px。

w-96，这个96是最大的数字，刚好一般的手机能容纳下这个宽度。

不过还是能有自定义的宽度，例如 w-[100px]

颜色虽然没有那么自由了，但是实际上这些颜色都是设计师精心设计好的，不用我们自己再去思考在颜色细节上应该怎么亮一点还是暗一点了。

文档也不错，文档里有搜索工具，一搜原始的css代码就能搜到对应的tailwindcss应该怎么写。

近期使用成果

最近几天用 Nuxt+tailwindcss 给别的公司做官网：mountainspring.com.cn，算是一个partimejob吧。（没有打广告的意思，不过有一说一，做一个旅游产品官网的过程中，仿佛自己好像也跟着旅游了一样）

鼠标悬浮，一个盒子里的背景图片放大，如果只是知道一些类名怎么用，还真不知道咋写，这个时候就需要仔细看看官网文档，就会发现还有group这个东西来解决父盒子悬浮改变子盒子的样式。

<div class="group relative w-96 h-96 overflow-hidden">
    
    <img class="absolute w-full h-full object-cover opacity-75 group-hover:scale-105 transition"/>
    
    <div class="absolute w-full h-full">
        文字层...
    </div>
</div>

总之熟练使用tailwindcss之前要熟练使用flex布局。

还要注意版本，新的版本里，”w-96 h-96” 可以简写成 “size-96”

记录一些感受和想法

之前做前端的时候，如果是纯切图，只有10%~20%的时间在写html，剩下的时间全都在写css。学会tailwindcss之后以后就基本不怎么用写Scss、Less了，越写越快。

回想起曾经很多年前最开始学前端的时候，还不会flex布局，grid布局，啥啥都用浮动。一个导航栏整了一个小时。现在看到有的视频弹幕说：浮动是最low的。我感觉自己曾经浪费了很多时间。目前个人认为体验过程太多了实际上会浪费很多时间，学会一个东西赶快看看还有没有更高级的，迭代升级，就像一些即时策略RTS类游戏里不停的迭代升级资源采集器一样。技术栈的越来越高级就像是不同等级的资源收集器：

一级采集器：css

二级采集器：less、scss

三级采集器：tailwindcss

四级采集器：Echars图标库、AntDesign 等各种UI组件库

五级采集器：WordPress

可能这个“五级采集器”有一点争议吧。他的限制有点多，只适合做做博客之类的东西。不过个人感觉效率比组件库和写代码更快。

忽然感觉自己升级的很慢，似乎花了很多时间，把采集器升到二级的时候就没有再想着升级采集器了。直接带着二级采集器生产各种其他的兵营和建筑去了（做各种大小项目）。

可能的缺点

学习成本：就像双拼输入法一样，这东西还是需要一点时间成本和耐心来学会的。推荐在不那么忙和着急的时候来学。

其实也正常，毕竟升级采集器的过程也需要等待时间。这段等待时间中采集器不会产出任何资源，但在升级之后的时间中，高倍的效率会逐渐补上。

重复样式：在多个一样的盒子的时候，会出现样式重复，需要写好几个地方。

一些可能的解决方法：alt+鼠标左键多光标，同时写、或者使用v-for循环、或者抽取成一个组件出去。

原生的前端用不了循环和组件化，因此原生前端可能不太适合。