【vue2】vue2.7x的项目中集成tailwind.css真的不要太香
在vue2项目中集成tailwind.css，对于不喜欢写css的同学来说真的是是一个福利，开发快速，代码简洁，简直不要太香了。
效果展示
官网效果展示
集成步骤
- 确保证Node.js 版本在 14.17.0 以上，安装相关依赖
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
- 创建 TailwindCSS 文件
新建创建 tailwindcss.css文件，写入以下内容
@tailwind base;
@tailwind components;
@tailwind utilities;
- 在 main.js 中引入这个文件
import '@/assets/tailwindcss.css'
- 创建tailwindcss配置文件
npx tailwindcss init
这会生成一个tailwind.config.js文件，默认里面是有基础配置信息的
module.exports = {purge: ['./src/**/*.{js,jsx,ts,tsx,vue}', './public/index.html'],darkMode: false, // or 'media' or 'class'theme: {colors: {blue: '#1fb6ff',purple: '#7e5bef','gray-dark': '#273444',gray: '#8492a6'},extend: {}},variants: {extend: {}},plugins: []
}
可以根据自己的需要，添加自定义配置，使用的时候参照官网实例即可
- 最后还要配置postcss.config.js文件
module.exports = {plugins: {tailwindcss: {},autoprefixer: {}}
}
到这里，我们就在vue2中配置好了，项目中就可以正常使用tailwindcss了
依赖版本
"dependencies": {"@tailwindcss/postcss7-compat": "^2.2.17","autoprefixer": "^9.8.8","core-js": "^3.8.3","element-ui": "^2.15.14","postcss": "^7.0.39","vue": "^2.6.14","vue-router": "^3.6.5"},
"devDependencies": {"@babel/core": "^7.12.16","@babel/eslint-parser": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3","prettier": "^3.6.2","sass": "^1.91.0","sass-loader": "^16.0.5","tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17","vue-template-compiler": "^2.6.14"}
背景色不生效的问题
- 在新版的tailwindcss中，引入了背景色不生效是因为引入的方式有问题
所以，我们要添加这样的引入方式
import 'tailwindcss/tailwind.css'
这样，我们给按钮添加的字体，背景色就生效了。
<button class="bg-indigo-500 text-white py-2 px-4 rounded-full hover:bg-indigo-300">Save changes
</button>
参考文档：https://www.tailwindcss.cn/docs/configuration