如何在Nuxt 2项目中使用Vue 2语法与Tailwind 2？解决PostCSS版本冲突

这个冲突的核心是Tailwind CSS 2官方默认依赖PostCSS 7，但Nuxt 2要求PostCSS 8。不过Tailwind官方提供了PostCSS 7兼容的特殊版本，直接按以下步骤操作即可解决：

• 安装适配PostCSS 7的Tailwind及配套依赖
  执行下面的命令安装兼容版本的包，强制指定PostCSS 7和对应版本的autoprefixer：

  # npm
  npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  
  # yarn
  yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  

• 配置Nuxt的PostCSS插件
  在nuxt.config.js中修改build.postcss配置，手动指定使用我们安装的Tailwind和autoprefixer插件，覆盖Nuxt默认的PostCSS 8相关配置：

  export default {
    build: {
      postcss: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {}
        }
      }
    }
  }
  

• 生成并配置Tailwind配置文件
  运行初始化命令生成Tailwind的配置文件：

  npx tailwindcss init
  

  打开生成的tailwind.config.js，添加Purge配置以优化生产环境的CSS体积（按需修改路径）：

  module.exports = {
    purge: [
      './components/**/*.{vue,js}',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.{js,ts}',
      './nuxt.config.{js,ts}'
    ],
    darkMode: false,
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
  

• 导入Tailwind基础样式
  在assets/css目录下创建tailwind.css文件，添加以下内容：

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

  然后在nuxt.config.js中添加全局CSS引用：

  export default {
    css: ['~/assets/css/tailwind.css']
  }
  

完成以上步骤后，重启Nuxt开发服务，就能正常在Vue 2组件中使用Tailwind CSS 2的语法了。

内容的提问来源于stack exchange，提问作者Nguyễn Thế Sơn