TailwindCSS 初试手记

2023-10-13学习笔记前端

省时小结

经过短暂的试用，个人觉得 TailwindCSS 适用性如下：

适用: 首陆/介绍/演示页面，个性化网站，名片、介绍性质网站。
不太适用: 企业应用、TO B系统、管理、应用性质网站。

之所以不适用，原因并不是不能用胜任，而是因为太胜任人，会导致开发人员沉迷于样式调试中不可自拨。

对于应用类性质的网站，主要价值应该在于功能点上，理想状态下时，开发人员应该忘记 CSS 的存在，更适合使用 antd、mui 等完好的组件库。

就目前的感受的话 TailwindCSS 有以下优缺点：

先说缺点
class 爆炸 : 虽然这个缺点可以有多种技术手段解决，但多多少少影响可读性。
不支持 Scss : 或者说不支持类似 scss 的层级结构语法，也可使用插件解决，虽官方明确不推荐。
有学习成本 : 入门 TailwindCSS 时，需要学习一些概念，在前端项目中需要结合各种配置/PostCSS/插件，才能发挥出最大威力。
再说优点
开发效率 : 熟悉后，编写样式的效率是真心快。
可维护性 : TailwindCSS 的复用维护方式有所不同，做的好时比mixin、function等方式更好用，但不规范时也会很邋遢。
扩展性 : 如果使用了基于 TailwindCSS 的组件，那改造这些组件的样式会很轻松。
体积更小 : Tailwindcss 编译工具只将用到的 class 引到 CSS文件，其它技术都需要一般需要全量引入 CSS文件。

正文开始：TailwindCSS

第一次看到TailwindCSS时，并没有太过新鲜的感觉，有十几年历史的BootStrap早就有untity class一说，直到最近简单试用一下后，马上改变了观点，这两个东西差别太大了。

可以查看 TailwindCSS 官方文档入门，根着操作一下，就可以把一个 tailwindcss 语法的 CSS文件，编译成标准的 CSS 文件。

编译器

Tailwind 自带一个 CSS编译器，相比于scss,less，不同之处是： Tailwind 大量使用已经封装好的定义，而不是写原生CSS, 例如:

.text{
    @apply text-red-900/30;
}
/** 等同于 */
.text{
    color: rgb(127 29 29 / 0.2);
}
/** 在 sass/less 中时 */
.text{
    color: rgba(#be2020, 0.2);
}

Tailwind 几乎封装网页开发需要的所有工具： 皮肤定制、排版、响应式、容器、字体、箱型、滤镜、动效、暗色模式，等等。

熟悉这些工具使用后，一行 css @apply 几乎可以完成 css 几十行的功能，非常省时间与代码行数。

而且，经过编译器后，无用的样式不会输出，例如：

.text{
    @apply text-white;
    @apply text-black;
}
/* 输出结果 */
.text{
    /** color:white 不会输出。*/
    color:black; 
}

样式扩展

有了编译器的计算优化，对于基于 TailWind 的样式库进行扩展，也会很不一样，我们平常使用的框架都是编译好的，如果需要扩展，一般使用样式覆盖

/** 框架中自带一个 btn-primary，修改默认按钮颜色 */
.btn-primary{
    color: black;
}
/** 最终生成如下： */
.btn-primary{   /** --> 这个是原本的样式 */
    color: white;
}
.btn-primary{   /** --> 这个是覆盖之后多出来的 */
    color: black;
}

由于 TailWind 内置了编译器，所以经过编译器优化后，最终不会生成多余的样式，如：

/** 框架中自带一个 btn-primary，我们自己写一个样式覆盖 */
.btn-primary{
-    color:black;
+    @apply text-black;
}
/** 最终生成如下： */
/** 说明：默认的 color:white 不会输出 */
.btn-primary{ 
    color: black;
}

结合前端技术

其实像这样的技术，很久之前也用过类似的，那时有个基于 sass 的工具： Compass，现在早已不维护了。

Compass 提供了很多封装好的 Function 及 Mixin，引入也可省一些代码行数。

但 TailWind 比 Compass 更强大的是: Tailwind 很容易支持现在所有的前端项目及打包工具：React、Vue、WebPack、Vite、Next 等等。

最佳的实践方案就是使用postcss，使用支持 HMR 的 DevTool 工具，会把开发前端页面时的心情舒适度，提高一个档次。

其它说明

安装 VSCode 插件，开发过程中，在css*、tsx、html、vue、mdx 等文件中写 className 或 @apply 时，都会自动提示补全。

而且当在html标签写class属性时，可能根据所在标签过滤没用的 class，非常方便。

插件地址： https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

只是小试牛刀，简单的在这个博客上用了下，并没有深入学习，就先讲到这，感觉非常不错，比以前的库都有进步。

而且官方有个组件市场，299刀就可以永久使用 Marketing/Application/Ecommerce 的所有模板，单买只要149，非常良心（个人感觉 Application 没啥用，此类网站最好别(直接)用TailWind，或是用已经封好的更成熟的组件库吧，必竟逻辑比皮肤更重要。）

总之是一个值得学习的框架，后续若有机会在大项目中使用再深入学习更新。