TailwindCSS安装教程（PostCSS）

#官方教程简直是一坨，自己跑ai查文章做出来的安装总结，作者开发环境为Vue2+VueCLI#

本文为TailwindCSS3.4版本安装教程

1，安装tailwindcss3.4.1

npm install -D tailwindcss@3.4.1

2, 初始化TailwindCSS配置文件

npx tailwindcss init

3，配置Tailwind配置文件，添加内容路径

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './public/index.html'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

将对应使用TailwindCSS的文件写入content。我这里将index.html放在了public文件夹中

4, 更新PostCSS配置文件（因为是PostCSS引入的方式）

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  'plugins': {
    'tailwindcss': {},
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {}
  }
}

5, 接下来我们需要创建一个Tailwind CSS入口文件，取名为tailwind.css，放置在你管理css的文件夹中

// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

如果PostCSS版本不够

        如果错误提示"PostCSS plugin tailwindcss requires PostCSS 8“ ，这意味着安装的Tailwind CSS需要PostCSS 8，而PostCSS版本对不上，比如我这个项目Vue CLI4.x项目使用PostCSS7。我们可以通过安装兼容性版本的Tailwind CSS解决这个问题

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

 如果需要兼容别的版本的postcss，把命令的7改为对应数字就行