前言
注意：此教程基于tailwind最新的3.X版本，3.X与旧版本的示例教程存在差别，我会在本文的最后贴上tailwind的2.X与3.X版本区别。
什么是Tailwind CSS
一个实用优先的 CSS 框架，包含 flex、pt-4、text-center 和 rotate-90 等类，可以直接在您的标记中组合以构建任何设计。
按照我的理解，tailwind就是先按照一定的语法规则约定CSS类，从而在开发中使用这些约定的类名，在编译时tailwind会通过识别html或者Js文件中使用的CSS类，最后生成对应的样式并导出到某个CSS文件中。
例如我在index.html的div标签上使用了flex这个类名，tailwind编译之后会生成flex的样式并将内容输出到output.css文件中：
// index.html
<div class="flex">hello world</div>
// 经过tailwind编译之后生成output.css
// output.css
.flex {
display: flex;
}
这里我给大家抛出一个疑问：“这跟在项目中直接写好全局的类名然后直接使用，有什么区别呢？”。
我们暂且先记住这个问题，接着往下看。
简单上手
安装依赖
首先新建一个test-tailwindcss文件夹，然后输入以下命令：
# 初始化package.json文件
npm init -y
# 安装tailwind
npm install -D tailwindcss
# 创建tailwind.config.js
npx tailwindcss init
运行完最后一行命令之后，会在当前文件夹生成一个tailwind.config.js文件，内容如下：
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
我们修改content属性，让他能够定位到项目中的html文件的位置，最终内容如下：
// tailwind.config.js
module.exports = {
// 定位index.html文件
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
新建index.html和input.css文件
完成上面的步骤之后，我们在项目根目录下新增一个src文件夹，然后在该文件夹内新增index.html文件和input.css文件：
<!-- ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn tailwind 3.X</title>
<!-- 注意这里引入的output.css文件，后面会用到 -->
<link rel="stylesheet" href="/dist/output.css">
</head>
<body>
<h1 class="flex text-3xl font-bold underline text-blue-600">
Hello world!
</h1>
</body>
</html>
在input.css文件里载入tailwind的三大部件：
@tailwind base;
@tailwind components;
@tailwind utilities;
完成以上的步骤之后，项目目前的结构如下：
tailwind编译
最后一步，使用tailwindcss对当前项目进行编译然后输出css文件：
npx tailwindcss -i ./src/input.css -o ./dist/output.css
运行完以上的命令之后，我们就可以看到在dist文件夹内多出了一个output.css文件，这个文件的末尾几行便是我们在index.html文件中用到的例如flex、font-bold类的样式：
由于我们一开始已经在index.html文件中导入了这个output.css文件，所以在浏览器中打开index.html：
amazing！使用tailwind之后，我们再也不需要写样式了，直接使用tailwind预先约定好的类名即可。这样极大地提升了我们的开发效率。
开头的疑问
现在我们回到开头的疑问：“这跟在项目中直接全局写类名然后使用，有什么区别呢？”。
其实我们在搭建tailwind的项目过程中就可以发现，tailwind存在于JIT引擎（Just-In-Time），就是在编译过程才去扫描我们的html文件，在这个过程中去识别使用了哪些类名，然后才生成对应的样式。
相比于预先直接全局写好大量的类名，JIT机制的优点在于精简紧凑，样式所占用的空间较小，因为用到了才会生成。
对于类名的规范统一
同时tailwind对于类名的规则约定，也可以说是一种写类名的规范与统一，统一团队内不同的成员甚至是不同的团队之间对于类名的书写与阅读。这给团队带来的效益，从长远来看利是远远大于弊的。
tailwind旧版本与3.X的区别
Tailwind CSS V3.0 默认使用了JIT引擎。而旧的版本中使用的AOT（Ahead-Of-Time）模式已经被舍弃并且不再被3.X版本使用。
因此旧版本的tailwind不适用于本教程～
V3.X版本具体的一个更新可以点击这里查看：这里
写在最后
谢谢大家看到这里，如果这篇文章对你有帮助的话，麻烦点赞加收藏哟。
