TailwindCSS安装教程（PostCSS）
#官方教程简直是一坨，自己跑ai查文章做出来的安装总结，作者开发环境为Vue2+VueCLI#本文为TailwindCSS3.4版本安装教程
1，安装tailwindcss3.4.1
npm install -D tailwindcss@3.4.1
2, 初始化TailwindCSS配置文件
npx tailwindcss init
3，配置Tailwind配置文件，添加内容路径
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{vue,js,ts,jsx,tsx}',
'./public/index.html'
],
theme: {
extend: {}
},
plugins: []
}
将对应利用TailwindCSS的文件写入content。我这里将index.html放在了public文件夹中
4, 更新PostCSS配置文件（由于是PostCSS引入的方式）
// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
'plugins': {
'tailwindcss': {},
// to edit target browsers: use "browserslist" field in package.json
'autoprefixer': {}
}
} 5, 接下来我们需要创建一个Tailwind CSS入口文件，取名为tailwind.css，放置在你管理css的文件夹中
// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities; 如果PostCSS版本不敷
如果错误提示"PostCSS plugin tailwindcss requires PostCSS 8“ ，这意味着安装的Tailwind CSS需要PostCSS 8，而PostCSS版本对不上，比如我这个项目Vue CLI4.x项目利用PostCSS7。我们可以通过安装兼容性版本的Tailwind CSS办理这个问题
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
如果需要兼容别的版本的postcss，把命令的7改为对应数字就行
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]