Tailwind 導入失敗

Question

你好，

我正在嘗試使用 Tailwind 和 NextJs 在 SCSS 中使用某種樣式來構建應用程序。 一切正常，我在我的組件中調整了一些 Tailwind class 直到應用程序突然崩潰並顯示此消息

./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 的頂部刪除這些導入，應用程序工作正常，但我不知道這個未定義的變量在哪里..

@順風基地； @尾風組件； @尾風公用事業；

這是我的順風配置

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: {},
    },
}

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 

Answer 1

為了寫那些：

@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"],
};

Answer 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文件。