taildwindcss官方文档  Installation - Tailwind CSS

1. 使用 PostCSS进行安装

1.安装 Tailwind CSS

//终端

npm install -D tailwindcss postcss autoprefixer

2.将 Tailwind 添加到 PostCSS 配置中

//postcss.config.js

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

//tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

//main.css  在main.js文件中那个记得引用哦

@tailwind base;
@tailwind components;
@tailwind utilities;

//终端

npm run dev

收到的错误信息表明 "tailwindcss" 插件需要使用 PostCSS 8，而当前的设置使用的是较旧版本的 PostCSS。如何迁移至 PostCSS 8，链接：https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

但是试了好多把postcss升级都还是有问题，然后。。。。

在 package.json 文件中，找到 devDependencies 或 dependencies 部分

 "dependencies": {
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  },
 "devDependencies": {
    "postcss": "^7.0.39",
  }

修改后保存package.json 文件，并在终端重新运行 ： npm install

然后再运行   npm run dev

就成功了！！！