什么是Tailwind CSS?
Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
无需离开您的HTML，即可快速建立现代网站。
本人已体验过，开发体验非常完美~🤹♂️
安装步骤
基于vanilla（无框架）
vanilla即是纯HTML,CSS,JavaScript的项目。
1. 初始化package.json
npm init
2. 安装taildwindcss以及它的依赖postcss,autoprefixer
npm install -D tailwindcss postcss-cli autoprefixer
3. 初始化postcss.config.js和tailwind.config.js文件
npx tailwind init -p 这样我们的根目录下就生成这两个文件啦~
4. 新建css文件夹并载入tailwindcss核心部件
在根目录下创建css文件夹，然后在文件夹里创建style.css文件。
在style.css文件里载入核心的三大部件：
@tailwind base; @tailwind components; @tailwind utilities; 复制代码
此时你的文件可能会有波浪线提醒，这是没有关系的。
5. 配置postcss
你可能要问了postcss是个啥?大家可以参考这篇文章:
我们在package.json文件下新增一个script
"watch": "postcss css/style.css -o dist/style.css --watch"
执行npm run watch就会将css文件夹下的style.css输出到dist文件夹下的style.css
然后我们就可以使用tailwindcss啦，在dist目录下新建index.html然后引入dist目录下的style.css，最终文件目录就是这样:
6. 尝试使用
HTML代码：
<h1 class="text-center text-3xl text-red-600 bg-blue-400">一起来学tailwindcss</h1> 复制代码
不用写样式，我们看看页面输出：
怎么样，非常棒吧，这样我们就不用自己写css了，极大地提升了生产力！当然你想自己写样式并且使用预处理器也是可以的，具体使用细节，大家可以参考官方文档！
7. 针对生产环境
现在我们已经可以使用tailwindcss了，但是对生产环境并不友好，因为我们可以看到style.css文件中有近19万行代码。
我们没有用到的代码也会被打包进来，这时候还需要做点配置针对生产环境：
打开tailwind.congif.js文件，在purge数组中新增会编写taildwindcss class的文件
在package.json数组中新增script 节点
"build": "cross-env NODE_ENV=production postcss css/style.css -o dist/style.css" 再执行
npm run build我们打开style.css会发现打包后的代码只有600多行啦~
最后
⚽本文介绍了当红框架的配置过程，让你快速开始上手TailwindCSS~
⚾如果这篇文章对你有帮助的话，麻烦点赞收藏哟~
