前端⼯程化之TailWindCss初体验

如果出现同样的类名，很容易造成不同的样式互相覆盖和污染。

3.可维护性较差：代码写完后，如何最⼩化后续变更的成本？如何确保任何同事都能轻松接⼿？

例：A根据⾃⼰喜好随意命名样式，随意层叠样式，这样会给对接人员迭代会带来不好体验。

应对以上问题，CSS ⼯具链、⼯程化领域⽅案应运⽽⽣：

二、什么是tailWindCss？

如果你从来没有接触过Tailwind，可以看下⾯：

Tailwind⾃带的类名涉及到Base Styles、弹性布局、间隔、尺⼨、排版、背景、边框、表格、动画等，凡是css能涉及到的其都已集成。您只需要按照其⽂档,使⽤相应的类名就⾏，这时候你可能要问，要是没有我⾃⼰想要的样式怎么办？这个问题我们先留着下⾯再讲。

我们先讲⼀讲其具备的⼏⼤优点：

1.极⼤程度上降低css的代码量

使⽤Tailwind CSS，基本可以不⽤再写css。对于整体⻛格差不多的应⽤，所有的效果⼏乎都可以通过class名来完成。

2.较好的语义化

使⽤ TailwindCss 你不⽤花精⼒来定义类名，你可以使⽤内置具有良好语义化的类名，实现样式效果。你也可以⼀定程度定义符合你⾃⼰规则的类名，例如加上统⼀的前缀。

3.可定制化程度极⾼

如果使⽤bootstrap，element ui等这些css框架，你想强⾏更改其⾃带组建的样式，恐怕有经验的⼩伙伴对样式穿透的写法和!important很熟悉🤪，关键有时候关键性的组建样式穿透跟增加层级还不⼀定能解决问题！针对这种覆盖式的样式修改⽅法，笔者认为很脏很变扭，对⽐到Tailwind CSS，你可以⾃⼰封装你⾃⼰想要的样式，把它集成到整个框架中，全局直接使⽤。

4.响应式设计

TailwindCss 中的每个功能类都可以有条件的应⽤于不同的断点（breakpoints），在不同分辨率设备上，可以轻松切换属性。内联样式中，⽆法使⽤媒体查询。按照之前的写法：你肯定哒哒哒⼀顿敲代码，如下所示：

但是在Tailwind CSS，⼀句话就能搞定：

正如上⾯提到的，我现在⽤到了相关内置的css类，但是⼜不太符合设计的要求，怎么办？莫担⼼，TailwindCSS提供了⼀整套的重写、覆盖默认配置的⽅案，细粒度到每⼀个属性。这种覆盖样式和其他css框架的强⾏覆盖是有区别的，它让你的样式具有归属感，⽽不像狗⽪膏药⼀样到处搭在指定的地⽅。

⽐如我现在想要使⽤某个特殊字体颜⾊，我优先打开tailwindcss⽂档去找⼀找，结果发现没有我想要的。

现在h5的夜间模式⽐较潮流，很多需求也会要求⽀持。平时接到这种需求，没接触过的⼈肯定会先去求度娘，结果发现有下⾯三种解决⽅案。感觉⼜要写css ⼜要写js，怪⿇烦的。针对这⼀点，TailwindCSS肯定必须安排啦！

1.安装

以下⽅法是 Vite + Vue 模式下的安装⽅法，其他脚⼿架与框架的使⽤同理。

创建项⽬

Vite创建的项⽬默认集成了 PostCSS ，⽽ TailwindCSS 本⾝就是⼀个 PostCSS 插件，所以直接使⽤即可。

使⽤ tailwindcss 的初始化命令创建会更快：

(2)创建 tailwind.config.js ⽂件，主要进⾏扫描规则、主题、插件等配置。

(3) 为了打包时TailwindCSS能⽣成对应的样式⽂件，需要在 tailwind.config.js 中正确配置content 字段，如以下配置将扫描 src ⽬录下所有以 vue/js/ts/jsx/tsx 结尾的⽂件。

TailwindCSS并不会⽣成⼀个全量的样式包，⽽是根据具体使⽤到的语法⽣成对应的样式代码，这样可以确保打包产⽣的样式包是最⼩的。

参考文献：https://tailwindcss.com/docs/content-configuration

5.引⼊Tailwind的基本指令

index.css/tailwind.css

以下是笔者看到部分体验者的评价，我觉得特别中肯，特此贴上：