Nuxt获取错误:无法解决“@tailwindcss/base”

Question

使用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";

Answer 1

在路径前面加上倾斜~

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

此外，还有一个特殊的指令，称为顺风。所以你可以试试

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