解决安装 tailwindcss requires PostCSS 8问题

 taildwindcss官方文档  Installation - Tailwind CSS

1. 使用 PostCSS进行安装

1.安装 Tailwind CSS

//终端

npm install -D tailwindcss postcss autoprefixer

2.将 Tailwind 添加到 PostCSS 配置中

tailwindcss将和添加autoprefixer到您的文件中，或项目中配置 PostCSS 的任何位置。 postcss.config.js

//postcss.config.js

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

3.配置您的模板路径

在文件中添加所有模板文件的路径tailwind.config.js。

//tailwind.config.js

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

4.将 Tailwind 指令添加到您的 CSS 中

@tailwind将Tailwind 每个层的指令添加到您的主 CSS 文件中。

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

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

5.开始您的构建过程

npm run dev使用文件中配置的任何命令运行构建过程package.json。

//终端

npm run dev

安装过程中可能遇到的问题：

error in ./src/assets/main.css

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

PostCSS 8 for end users · postcss/postcss Wiki · GitHub (https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users)

HTML · 165 KB

收到的错误信息表明 "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

就成功了！！！