本文参考了全网最详细，tailwindcss在vue2中的使用教程

具体步骤如下：

第一步 安装tailiwndcss、postcss、autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

第二步 创建tailwind.config.js并写入以下代码

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ["./src/**/*.{html,js}"],
 theme: {
   extend: {
     colors: {
       'primary': '#409EFF',
     },
     fontsize: {
       '12': '12px',
       '14': '14px',
       '16': '16px',
       '18': '18px',
       '20': '20px',
       '22': '22px',
       '24': '24px',
       '26': '26px',
       '28': '28px',
       '30': '30px',
       '32': '32px',
       '34': '34px',
       '36': '36px',
     },
     spacing(config) {
   			let result = { 0: '0' }
   			// 允许的数值大一些也无所谓，最后打包tailwindcss会摇树优化，未使用的样式并不会打包  
   			for (let i = 1; i <= 999; i++) {
   				result[i] = `${i}px`
   			}
   			return result
   		},
     backgroundImage: {
       'primary-gradient': 'linear-gradient(200deg, #409EFF 0%, #67C23A 100%)'
     },
     borderColor: {
       'primary': '#409EFF' 
     },
     borderWidth: {
       '1': '1px',
       '2': '2px',
       '4': '4px',
       '6': '6px',
     }
   },
 },
 plugins: [],
 corePlugins: {
   preflight: false // 关闭默认样式
 }

}

注意：corePlugins: { preflight: false // 关闭默认样式} 非常重要，否则会跟elementui样式冲突，造成样式错乱

第三步 在根目录创建postcss.config.js并写入以下内容

module.exports = {
 plugins: {
   tailwindcss: {},
   autoprefixer: {},
 }
}

第四步 在src目录下创建tailwindcss.scss并写入以下内容

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

第五步 在app.vue中导入tailwindcss.scss

@import './tailwindcss.scss'

大功告成，此时执行npm run dev后就可以使用tailwindcss中的样式了！