Tailwind 导入失败

Question

我正在尝试使用 Tailwind 和 NextJs 构建一个具有 SCSS 风格的应用程序。一切正常，我正在调整组件中的一些 Tailwind 类，直到应用程序突然崩溃并显示此消息

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[1]!./ node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[10].use[2]！。 /node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[10].use[3]！ ./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[10].use[4]!./styles/globals.scss 类型错误：无法读取未定义的属性（读取“5”）

看起来就像这样，工作了3个小时然后就停止了，我没有更改任何配置文件或其他任何内容。我不明白。经过一段时间的查看我的代码后，我发现如果我删除 global.scss 顶部的这些导入，应用程序可以正常工作，但我不知道这个未定义的变量在哪里..

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

这是我的顺风配置

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {
      spacing: {
        '2/3': '66.666667%',
      },
      colors: {
        'lavander-grey': '#625F63',
        'lavander-indigo': '#9893DA'

      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],

};

package.json

  "engines": {
    "node": ">=14.0"
  },
  "engineStrict": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "graphql": "^16.6.0",
    "graphql-request": "^5.0.0",
    "html-react-parser": "^3.0.4",
    "moment": "^2.29.4",
    "next": "13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-multi-carousel": "^2.8.2",
    "sass": "^1.56.1",
    "swr": "^1.3.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "eslint": "^8.27.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-next": "13.0.3",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4"

Postcss.config.js

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

我尝试安装一些旧的 Tailwind 软件包，擦除了 node_modules，确保这不是我的组件的罪魁祸首，尝试了一些 Tailwind 配置，启动了一个新的开发服务器，做了一些激烈的谷歌搜索

Answer 1

Tailwind 从 Tailwind 3.0 开始发布 JIT 编译器，不再在底层使用 PurgeCSS。

将配置的第一行更新为：

content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

如文档中所示，请务必包含一个

postcss.config.js

文件。

Answer 2

为了写这些：

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

您需要安装

postcss

。 'postcss` 就像 webpack，使用插件并将它们评估为浏览器理解的现代 CSS 语法

 npm install -D tailwindcss postcss autoprefixer postcss-nesting

那么你应该有

postcss.config.js

并有这个配置：

module.exports = {
  plugins: ["tailwindcss", "postcss-nesting", "autoprefixer"],
};