Tailwind 导入失败答案

【问题标题】：Tailwind import failedTailwind 导入失败
【发布时间】：2022-11-15 14:42:37
【问题描述】：

你好，

我正在尝试使用 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 TypeError：无法读取未定义的属性（读取“5”）

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

这是我的顺风配置
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"
thanks for your help


I've tried to install some older Tailwind packages, wiped node_modules, made sure this was not my components the culprit, tried some Tailwind configurations,started a fresh dev server, did some intense googling 

【问题讨论】：

标签： sass next.js tailwind-css postcss

【解决方案1】：

为了写那些：

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

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

 npm install -D tailwindcss postcss autoprefixer

【讨论】：

【解决方案2】：

随着 Tailwind 3.0 的 JIT 编译器的发布，Tailwind 不再在后台使用 PurgeCSS。

将配置的第一行更新为：

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

如文档中所示，并确保包含postcss.config.js 文件。

【讨论】：