Zenn
🐕

tailwind css 導入時の npm run dev / yarn dev の Cannot read properties エラー

2022/10/29に公開
Next.js
npm
yarn
Tailwind CSS
pnpm
tech

こんにちは

Next.js に tailwind css を導入をしようとしたらこのようなエラーになったことがありますか?

ある日

(僕) Next.js に tailwind css 導入したいなー

( ある記事 ) それなら tailwind css 公式に方法載ってるよ！ 公式のサイト (下記) を参考にしな！

--

https://tailwindcss.com/docs/guides/nextjs

--

(僕) いう通りにやったのに、 npm run dev も yarn dev もエラー出るんだけど。。。

--

こんなエラーです

$ npm run dev

> sample-app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./src/styles/globals.css
TypeError: Cannot read properties of undefined (reading 'config')
wait  - compiling /_error (client and server)...
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./src/styles/globals.css
TypeError: Cannot read properties of undefined (reading 'config')
    at runMicrotasks (<anonymous>)

--

npm run dev と yarn dev もコマンドライン上では通るんですが、localhost:3000にアクセスすると...

--

TypeError: Cannot read properties of undefined (reading 'config')で検索しても解決できません

解決策

以下の二つのファイルの内容を変更してください

  • postcss.config.js
  • tailwind.config.js

postcss.config.js

const path = require("path");

module.exports = {
    plugins: {
        tailwindcss: {
            config: path.join(__dirname, "tailwind.config.js"),
        },
        autoprefixer: {},
    },
};

--

tailwind.config.js

const path = require("path");

module.exports = {
    content: [
        path.join(__dirname, "./pages/**/*.{js,ts,jsx,tsx}"),
        path.join(__dirname, "./components/**/*.{js,ts,jsx,tsx}"),
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

引用元 : https://github.com/tailwindlabs/tailwindcss/issues/6393

あとがき

せっかく tailwind css に挑戦しようとしても、実行できないエラー起きたら萎えますよね。
tailwind.config.js に追記することで、JITを有効にしたりできるので、調べてみるのもいいですよ！

ではまた

Discussion