tailwind cssが効かなく,解決までに時間がかかったので共有します.
エラー
./src/app/globals.css.webpack[javascript/auto]...
Error: Malformed PostCSS Configuration
at Array.forEach (<anonymous>)
結論
postcss.config.js
module.exports = {
plugins: [
'tailwindcss',
'autoprefixer',
'postcss-import',
'postcss-flexbugs-fixes',
]
}
pluginsの指定方法が間違っていて(バージョンで異なる?)エラーになっていました.
postcss.config.js
// 失敗例
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
]
}
参考