前言:
tailwind可以理解为一个css库，编写方式很另类，但是如果时间长了可能会变成真香系列（也能可能变成真。。。。），注：以下阐述都是个人理解以及网上寻找的资料
什么是Tailwind CSS:
Tailwind CSS是一种实用工具- 基于低级别的CSS框架，旨在简化建设有速度，较少关注Web应用程序编写自定义的CSS,
官话：Rapidly build modern websites without ever leaving your HTML.（无需离开 HTML 即可快速构建现代网站。）
tailwindcss 是一个非常富有争议的库，喜欢它的人和讨厌它的人都非常多。
不做对比！直接上干货，整！
今天给大家带来的版本 tailwindcss 版本是：3.0.23
上才艺!!!
启动项目,我们可以在 src/App.vue 中为 img 标签增加一个 class="bg-red-900"
<img class="bg-red-900" alt="Vue logo " src="./assets/logo.png" />
查看项目 img 标签背景变为红色，则表示成功
这个时候我们定位这个元素
这种在HTML中编写样式的感觉很奇妙,而这样的一种方式就是 tailwindcss 的核心理念
tailwind 官方介绍为 无需离开HTML即可快速构建现代网站 ，那么这句话怎么解读呢？具体来说就是 ： tailwind 提供了很多的 具体类名 ，每一个类名背后都代表着 一段 css 的内容。之前我们需要 template 中完成 html，style 中完成 css 。那么在现在我们就可以把 css 变成 对应的类名 直接添加到 html 的 class 中。所以我们就不需要再去切换到 style 区域，直接在 html 区域来完成对应的样式了
不能说知己知彼，但是至少要了解个大概，这种语法、或者类名多少有点难搞怎么办，别担心tailwind给用户罗列出了对应API文档 语法文档 ，而且VScode 有一个很好的插件 "Tailwind CSS IntelliSense"
有了这个插件，我们就再也不用担心写错的问题了，在我们写对应元素的时候右侧会给我们很好的提示，
tailwindcss 设计理念和价值体现
1，它的设计理念
2，它的价值体现
设计理念
tailwindcss 中一个非常核心的内容就是： 每一个类名都代表了一个 css 属性 ，这个样式在 tailwindcss 中被称作为 原子化 CSS
那么想要搞明白这样的一种设计理念，那么我们需要先搞清楚 CSS 设计史上的一些粒度划分。
整个前端历史中，CSS 颗粒度设计主要可以分为 4 种形式（ 颗粒度自上而下逐渐增大，颗粒度越大则约束性越高，可定制性越弱 ）：
1，行内样式：样式全部写入行内。自由度最高，可定制化最强。但是不方便样式的复用，每次都要写完整的样式。
<div style="background-color: #ffffff; color: #333333;"> 我是一个div</div>
2，原子化 CSS：每一个类名都代表了一个 css 属性。自由度依然很强，可定制化依然很高，也方便复用。但是大量的样式会造成大量的类名。
<div class="bg-white text-zinc-800">我是一个div</div>
3，传统形式：通过一个或几个具有语义化的 class 来描述一段 css 属性。封装性强，语义化强，自由度和可定制化性一般（比如 cart 就标记好了当前为一个卡片，通常边框、弧度、阴影、padding 也都一并规定好了）。但是大量的 html 需要取大量的语义化 class ，并且在 html 和 css 中需要来回的切换、查找。
<div class="container-box desc-container cart">我是一个div</div>
4，组件形式：在 组件库 中极为常见。封装性极强（不光封装了样式，也封装了功能），语义化强。但是自由度和可定制化性比较差。
<m-cart>我是一个div</m-cart>
那么根据我们刚才所说，这四种形式的样式处理方式其实 各有优劣。
而 tailwindcss 的核心设计理念就是：第二个：原子化的 CSS 。那么根据我们刚才的分析，这种方式惟一的问题就是：大量的样式会造成大量的类名 这样的情况。而这样的一个问题在她的 高自由度、高定制化、高可复用 的优势之下，也就变得没有那么重要了。
价值体现
想要明确 tailwindcss 的价值，那么我们需要先来明确一下 现代的前端应用 开发的一些问题。
我们以传统的后台项目的项目为例。如项目中使用了 element-plus作为 UI 组件库 。当我们决定使用 element-plus 的那一刻起，就决定了 整体的项目样式为 element 设计风格。 如果此时我们想要把项目做出个性化的风格出来，那么 ”几乎是不可能的“。
不过好在 后台 系统，风格本就千篇一律，这样设计倒也没有问题。但是如果是 前台 系统呢？
前台系统讲究 高定制化、高个性化、高交互性 ，在这样的一个要求下，element、antd、vant 这样的组件库是否还能够满足我们需求呢？ 我想答案是肯定的
演示！~
PC
H5
结语：
讲了这些我想大家对tailwind已经有一个了解，其实我只是介绍了tailwind功能的冰山一角，他比较强大的功能比如在 tailwind.config.js 文件中进行全局配置，以及样式不同尺寸的统一管理、主字号的统一配置等等都还没有呈现给大家，有兴趣的小伙伴可以有时间看看，结尾附上搭建过程！
tailwind搭建过程
1，在我们的项目中执行 npm install -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.2 ，安装 tailwindcss
2，执行 npx tailwindcss init -p 创建 tailwind.config.js 文件，该文件为 tailwindcss 的配置文件，该文件默认内容为：
3，接下来我们需要添加模板路径（tailwind 的应用范围）
4，在 tailwind.config.js 文件中的 content 选项下，写入如下内容：
module.exports = {
// Tailwind 应用范围
content: ['./index.html', './src/*/.{vue,js}'],
...
}
5，接下来我们需要添加一些 tailwind 的指令
6，创建 src/styles/index.scss 文件，并写入如下代码：
// 导入 tailwind 的基础指令组件
@tailwind base;
@tailwind components;
@tailwind utilities;
7，然后在 src/main.js 中引入该 index.scss
8，因为我们使用了 scss ，所以需要安装 sass ，执行 npm i -D sass@1.45.0 安装 sass
9，此时 tailwind 已经安装到我们的项目中
几个亮眼的地方
首先是响应式设计。
css的媒体查询写起来还是比较麻烦的，如下：
@media only screen and (max-width: 760px) {
.navbar {
width:100%;
}
}
使用了Tailwind CSS就免去这些繁琐的东西。默认情况下，Tailwind使用移动优先断点系统，类似于您在Bootstrap或Foundation中可能使用的系统。
这意味着未加前缀的实用程序（如uppercase）在所有屏幕尺寸上都有效，而带前缀的实用程序（如md:uppercase）仅在指定的断点及以上断点生效。
如下一段代码就可以实现不同尺寸显示不同样式，是不是比媒体查询写法方便很多呢！
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>
当然了，媒体尺寸断点也是可以自定义的。
// tailwind.config.js
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}
第二方面是Postcss运用
Tailwind CSS结合了 postcss，将基础的 css 全部拆分为原子级别，同时还补全各种浏览器模式前缀，兼容性更好。例如：border: 1px solid #eee;拆分为：border-width、border-style、border-color
而且还支持根据自己设计稿定义契合自己项目的 csss 原子，这点真的很棒。
第一，如果不是为了快捷开发，恐怕不会有太多人完全满意传统 CSS 框架的样式设计。 第二，传统 CSS 框架通过“覆盖”进行定制。一般来讲，健康的做法是覆盖框架提供的变量，但是定制能力很有限。脏一点的做法就是手写 CSS 覆盖框架原生样式，但是原生样式之复杂（各种父级的不同情况，伪类的不同情况），哪怕一个小的组件，你也无法面面俱到。并且你最好得看源码。
第三方面是可维护性问题
就拿我们实现一个按钮效果来说，使用utilities class实现的话如下：
<!-- Using utilities -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
如果说有比较常用的，这里还能使用@apply指令围绕通用实用程序模式创建抽象，可以轻松解决此问题。
<!-- Extracting classes using @apply -->
<button class="btn btn-blue">
Button
</button>
<style>
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
</style>
这样维护起来也比较方便，相比bootstrap等这些框架，显得更加灵活，可操作性更强。
