【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