一、介绍
TailwindCSS 是一种现代的前端样式框架，它以“原子化”设计理念为核心，通过提供一系列可重复使用的CSS 类，帮助开发人员更快速地构建美观且响应式的用户界面。且提倡Mobile First ，即移动先行。
它的特点是：原子化设计 (即将样式划分为最小的单元)；大量预定义类；以及语义化命名。
同时，TailwindCSS 还可以做到让程序员不离开HTML 页面即可书写css ，构建所需要的页面。下面是它的官方网站：
TailwindCSS 官方网站
二、工作原理
TailwindCSS 的工作原理是扫描所有HTML 文件、JavaScript 组件以及任何模板中的 CSS 类 (class) 名，然后生成相应的样式代码并写入 到一个静态CSS 文件中。
换句话说，就是：在文件中用到的类就自动为你添加到CSS 文件中，没有用到的类则不会添加；这样做就可以最大程度的控制文件的大小。
接下来让我们来看看如何进行安装及最基本的使用。
三、安装
1. 通过npm 命令来安装 tailwindcss
如果你的系统还没有安装Node，那么你需要先去安装Node 之后，才能使用npm 命令！
注意：安装的位置在 你当前项目的文件夹根目录下！
我们这里演示的根目录名称为：TailwindCSS 。
npm install tailwindcss -D如下图：
2. 初始化
安装完成后，我们需要对 tailwindcss 进行初始化 (initialization) ，通过这个命令来创建我们自己的 tailwindcss.config.js 配置文件：
npx tailwindcss init注意：npx 并不是npm 的拼写错误！npx 是npm 5.2.0及更高版本中包含的一个命令行工具，用于执行本地安装的或在线安装的Node.js包中的命令。npx可以在不需要全局安装的情况下直接运行某个包中的命令，这使得它更加灵活，不需要事先安装一个包就能立即运行它的命令。
示例如下图：
在这里建议小伙伴们，将自己的html、css、js 等文件均放在一个文件夹内 (例如src 文件夹) 。之所以这样做会在后面解释原因。
当初始化完成创建文件成功之后，会在项目的根目录内生成一个 tailwindcss.config.js 文件，其中内容如下：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
3. 配置 tailwindcss.config.js 文件
此文件中的 content，它的作用是用于添加所有模版文件的路径。由于在这里我们将自己的文件放在了src 目录内，所以在这里我们的路径是：
// ...
content: ["./src/**/*.{html,js}"],
// ...content 内这句代码的意思是：搜索src 目录及其子目录下所有后缀名为html 或js 的文件。它的作用便是，我们在文件中所使用到的类，全部都会被 tailwindcss 搜索到，然后交给它来为我们生成对应的静态CSS 文件。
4. 创建主CSS 文件，添加加载 tailwindcss 的指令
在这里我们创建一个名为 input.css 的文件，并且注意是 创建在src 目录内 (当然你同样可以在src 目录创建一个css 文件夹来存放所有的css 文件) 。
然后在 input.css 文件中添加如下指令：
/* input.css */
/* 添加每一个Tailwind功能模块 */
/* 引入基础样式 */
@tailwind base;
/* 引入组件样式 */
@tailwind components;
/* 引入工具样式 */
@tailwind utilities;5. 构建
下一步，通过运行以下的命令来扫描模版文件中所有出现的CSS 类(class) 并且编译CSS 代码。
注意：这里的命令行内的 input.css 路径需要修改为你实际对应的路径！
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch这里需要注意的是，自己创建的主CSS 文件(input.css) 要放在前面，TailwindCSS 构建的文件(这里我们命名为output.css) 放在后面，且该文件名和路径可以由你自己来决定。(千万不要忘记了命令行内的 -i 、 -o 和 --watch ！)
实际演示如下：
6. 文件放在src 目录下的原因
先给大家展示一下demo 的目录结构：
Tips：这里之所以将我们自己的文件都放在src 目录内，是因为：如果你将这些文件都放在根目录内，当你执行构建命令时，你的content 配置可能会是 ./**/*.{html,js} ，这样做的话 TailwindCSS 会将根目录下的 node_modules 文件夹内的对应文件全部搜索了一遍，这会使你生成的CSS 文件内出现很严重的样式问题并且增加文件的大小。所以当你如此构建时会出现警告 (warning) ：
所以最好的方式便是额外创建一个资源文件夹，并将对应的资源保存在该目录下。
7. 尽情编译
建构成功后，我们可以在HTML 文件中引入TailwindCSS 构建的CSS 文件 (output.css) ，随后就可以开始使用TailwindCSS 了~
四、演示
这里给大家展示两个demo：
demo1
代码：
效果：
demo2
代码：
效果：
五、插件推荐
通过TailwindCSS 来书写我们的样式最方便的一点就是可以直接在html 或js 文件上书写我们想要的样式而不用在CSS文件中书写。当然从上面的演示中也不难发现，这会造成一个问题，就是我们的class (类名) 会非常的长。
上方demo 中的写法是比较推荐的，因为这样你可以很直观的看到所有使用到的类名，但是会占据特别多行。所以在这里给大家推荐另一个可行的方法，也就是一款插件，可以将我们的类名给单独折叠起来，等你需要查看或者需要修改时点击对应的位置即可展开。
插件：
效果图：
六、书写以及搜索方法
也许大家会遇到和BootStrap 一样的问题，刚开始使用的时候找不到对应的样式以及类名。但是最首先的一个熟悉的方法也就是：多去敲多去用，才能熟能生巧。
另外一点就是分享TailwindCSS 语法检索的技巧：TailwindCSS 的基本原则是将每一个style 语法转换为一个class ，因此在官网检索想要的样式class 时，按照样式的语法来检索是效率最高的。
很简单的比方就是你想写外边距的语法，就搜索 Margin ，你想要圆角边框，就搜索 Border Radius 。
七、总结
TailwindCSS 的使用范围非常广，不仅可以使用在普通的文件中，同样也可以适配各种各样的项目中，同时使用起来非常方便，因为含有大量的预定义类。
与此同时的是，TailwindCSS 是支持自定义和修改 类的，但是这方面已经属于TailwindCSS 的进阶使用技巧了。本博客暂时只讲解TailwindCSS 的安装和基础使用。进阶内容可以在其官网查阅，我也在后期也会为大家更新TailwindCSS 的进阶使用技巧。
新知识新技术只有多使用多运用才能熟练掌握，所以当我们能够熟练运用TailwindCSS 之后，相信再去研究其进阶技巧时也可以轻而易举的掌握。
