vue2中使用tailwindcss详细教程

1、安装tailwindcss

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

2、检查安装好的版本

"dependencies": {
    "@tailwindcss/postcss7-compat": "^2.2.17"
},
"devDependencies": {
    "autoprefixer": "^9.1.0",
    "css-loader": "^0.28.8",
    "postcss": "^7.0.39",
    "postcss-loader": "^3.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  },

3、创建tailwindcss文件

在 assets 文件夹下创建 tailwindcss.css文件
@tailwind base;
@tailwind components;
@tailwind utilities;

4、在入口文件main.js中引入

注意：要是不生效的话，就写在第一个
import '@/assets/tailwindcss.css'

5、创建tailwindcss的配置文件

# 创建一个空的tainwind css配置文件
npx tailwindcss init

6、对第五步生成的tailwindcss.config.js 文件配置

module.exports = {
  purge: [ "./src/**/*.{js,jsx,vue}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: []
  // corePlugins: {
  //   preflight: false,
  // }
}

7、在vue.config.js中配置

module.exports = {
    css: {
    loaderOptions: {
      postcss: {
        plugins: [require('tailwindcss'), require('autoprefixer')]
      }
    }
  },
}

8、创建postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

到此就完成配置啦~

9、测试

<div class="w-full h-20 bg-red-500 p-4 text-white">测试Tailwind</div>