一、Tailwindcss安装配置
1.安装固定版本
通过npm安装tailwindcss，然后创建你自己的tailwind.config.js文件
npm install -D tailwindcss@3.4.17
npx tailwindcss init
2. 在tailwindcss.config.js配置文件里面添加所有模板文件的路径
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js,vue}"],
theme: {
extend: {},
},
plugins: [],
}
3. 将加载 Tailwindcss的指令添加到你的 CSS 文件中, src目录下建立style.css文件，把下面的代码复制到style文件中
@tailwind base;
@tailwind components;
@tailwind utilities;
4. 开启tailwindcss CLI构建流程
npx tailwindcss -i ./src/style.css -o ./src/output.css --watch
5. 在main.js里面引入编译好的output.css文件
import './output.css'
Tailwindcss安装无效解决方案
1. 安装依赖
npm install -D tailwindcss@3.4.17
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
这将创建一个tailwindcss.config.js文件和一个postcss.config.js文件
2. 配置tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts}'],
theme: {
extend: {},
},
plugins: [],
};
3. 配置postcs.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
4. 配置style.css文件
@tailwind base;
@tailwind components;
@tailwind utilities;
5. 配置main.js（一定要导入style.css）
import './style.css'
