当前教程适用vite以及vue-cli搭建的vue2，vue3项目，(node版本限制暂未验证，目前本人使用的是14.21.2版本的node，如遇问题可以尝试对齐一下版本，uni-app框架适配验证中...)，下述教程以vue2从零搭建项目开始
官网地址：安装 - TailwindCSS中文文档 | TailwindCSS中文网
tailwindcss语法参考：Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网往下滑就可以看到了，不完整，后续会专门出个教程补充
tailwindcss保姆级教程(纯代码)：tailwindcss保姆级教程(纯代码)-CSDN博客
- 创建一个名叫demo的vue2项目
vue create demo - 安装项目依赖
npm i - 安装tailwindcss依赖
npm install -D tailwindcss - 创建tailwindcs的配置文件tailwind.config.js
npx tailwindcss init - 修改配置文件tailwind.config.js的配置
/ @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src//.{html,js,vue}"],
theme: {
extend: {},
},
plugins: [],
}
备注：tailwind.config.js为了生成样式 会扫描 项目中用到的css样式 的文件，扫描的文件地址配置即匹配content: ["./src/**/.{html,js,vue}"](项目根目录下的src中一级目录及二级目录下所有以html,js,vue结尾的文件)的结果，大家可以根据自己的项目需求具体调整 扫描文件
- 创建tailwindcss样式解析入口文件
创建位置：src/assets/input.css
input.css内容
@tailwind base;
@tailwind components;
@tailwind utilities;
这是 Tailwind解析CSS 的指令入口文件，下面我们在进行CSS样式构建的时候会从这个文件进入，然后输出匹配到项目中使用了的 原子化 css 标签属性
- 生成CSS样式文件
终端执行命令
npx tailwindcss -i ./src/assets/input.css -o ./src/assets/output.css --watch
注意!!!
命令npx tailwindcss -i 'a文件地址' -o 'b文件地址' --watch中的'a文件地址'一定要是我们在步骤6中创建的 tailwindcss样式解析入口文件
出口文件不做限制，可以自己定义，但一定要与步骤8中全局引入样式文件的地址一致
会生成项目中用到的 原子化CSS标签相关文件output，如下图：
- 在src/main.js中全局引入 输出的样式文件output.css
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import '@/assets/output.css' // 全局引入样式文件
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
怕小白找不到，附个图：
- 使用tailwindcss
现在我们就可以在项目中使用tailwindcss啦
下面大家可以用这个demo修改src/app.vue的内容验证一下
Hello world!
- 运行项目
因为此时终端被tailwindcss解析指令占据，我们新建一个终端用于运行项目
npm run serve
页面样式如下：
- 最后的强调
我们在调试的时候，要保持步骤7命令的持续运行，否则tailwindcss无法实现解析项目中新增的CSS样式 和 变更output.css文件中的 原子化CSS 标签，导致样式不生效。
跑两个终端一个用于解析tailwindcss，一个用于跑项目就可以解决啦
