Nuxt 出现错误：无法解析“@tailwindcss/base”

Posted 2023-03-06

【中文标题】Nuxt 出现错误：无法解析“@tailwindcss/base”

【英文标题】：Nuxt getting Error: Can't resolve '@tailwindcss/base'

【发布时间】：2021-06-14 02:13:49

【问题描述】：

使用 NUXT 和 Tailwind 2 构建项目。我收到错误提示

错误：无法解析“@tailwindcss/base”

我的 package.json 文件是：

  "name": "vite-example",
  "version": "1.0.0",
  "private": true,
  "scripts": 
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  ,
  "dependencies": 
    "core-js": "^3.8.3",
    "nuxt": "^2.14.12"
  ,
  "devDependencies": 
    "@nuxtjs/tailwindcss": "^3.4.2",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "autoprefixer": "^9.0.0",
    "nuxt-purgecss": "^1.0.0",
    "nuxt-vite": "0.0.36",
    "postcss": "^8.1.9",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-nested": "^5.0.5",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
  

我的 nuxt.config.js 文件有

build: 
  postcss: 
    plugins: 
      'postcss-import': ,
      tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
      'postcss-nested': 
    
  ,
  preset: 
    stage: 1 // see https://tailwindcss.com/docs/using-with-preprocessors#future-css-featuress
  

然后我的tailwind.css是

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

【参考方案1】：

在路径前加上波浪号 ~

@import "~tailwindcss/base";
@import "~tailwindcss/components";
@import "~tailwindcss/utilities";

还有一个名为 tailwind 的特殊指令。所以你可以试试

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

【讨论】：

谢谢！我更新了我如何调用顺风并且它起作用了。