NEW ARTICLE
kotlin エラー「error: the integer literal does not conform to the expected type Int」の解決方法
  1. HOME
  2. Tailwind
  3. Tailwind CSS エラー「Error: PostCSS plugin postcss-nested requires PostCSS 8.」が発生した場合

Tailwind CSS エラー「Error: PostCSS plugin postcss-nested requires PostCSS 8.」が発生した場合

Tailwind CSS エラー「Error: PostCSS plugin postcss-nested requires PostCSS 8.」が発生した場合

Tailwind CSS使用時に、エラー「Error: PostCSS plugin postcss-nested requires PostCSS 8.」が発生した場合の原因と対処法を記述してます。

目次

環境

  • OS CentOS Linux release 7.9.2009 (Core)
  • Tailwind 2.0.4

エラー全文

railsのwebpack使用時に発生

ERROR in ./app/javascript/css/application.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./app/javascript/cs 
s/application.css) 
Module build failed (from ./node_modules/postcss-loader/src/index.js): 
Error: PostCSS plugin postcss-nested requires PostCSS 8. 
Migration guide for end-users: 
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users 
    at Processor.normalize (/home/users/railsapp/node_modules/postcss/lib/processor.js:167:15) 
    at new Processor (/home/users/railsapp/node_modules/postcss/lib/processor.js:56:25) 
    at postcss (/home/users/railsapp/node_modules/postcss/lib/postcss.js:55:10) 
    at /home/users/railsapp/node_modules/tailwindcss/lib/util/parseObjectStyles.js:24:33 
    at arrayMap (/home/users/railsapp/node_modules/lodash/lodash.js:653:23) 
    at map (/home/users/railsapp/node_modules/lodash/lodash.js:9622:14) 
    at Function.flatMap (/home/users/railsapp/node_modules/lodash/lodash.js:9325:26) 
    at parseObjectStyles (/home/users/railsapp/node_modules/tailwindcss/lib/util/parseObjectStyles.js:23:26) 
    at parseObjectStyles (/home/users/railsapp/node_modules/tailwindcss/lib/util/parseObjectStyles.js:20:12) 
    at /home/users/railsapp/node_modules/tailwindcss/lib/util/processPlugins.js:37:123 
    at arrayMap (/home/users/railsapp/node_modules/lodash/lodash.js:653:23) 
    at map (/home/users/railsapp/node_modules/lodash/lodash.js:9622:14) 
    at Function.flatMap (/home/users/railsapp/node_modules/lodash/lodash.js:9325:26) 
    at parseStyles (/home/users/railsapp/node_modules/tailwindcss/lib/util/processPlugins.js:37:26) 
    at addComponents (/home/users/railsapp/node_modules/tailwindcss/lib/util/processPlugins.js:131:18) 
    at /home/users/railsapp/node_modules/tailwindcss/lib/plugins/container.js:101:5 
    at /home/users/railsapp/node_modules/tailwindcss/lib/util/processPlugins.js:69:5 
    at Array.forEach (<anonymous>) 
    at _default (/home/users/railsapp/node_modules/tailwindcss/lib/util/processPlugins.js:63:11) 
    at /home/users/railsapp/node_modules/tailwindcss/lib/processTailwindFeatures.js:64:54 
    at LazyResult.run (/home/users/railsapp/node_modules/postcss/lib/lazy-result.js:288:14) 
    at LazyResult.asyncTick (/home/users/railsapp/node_modules/postcss/lib/lazy-result.js:212:26) 
    at LazyResult.asyncTick (/home/users/railsapp/node_modules/postcss/lib/lazy-result.js:225:14) 
    at LazyResult.asyncTick (/home/users/railsapp/node_modules/postcss/lib/lazy-result.js:225:14) 
    at /home/users/railsapp/node_modules/postcss/lib/lazy-result.js:217:17 
 @ ./app/javascript/css/application.css 2:26-171 
 @ ./app/javascript/packs/application.js

原因

「Tailwind 2」は「PostCSS 8」が必要なため

対処法

「PostCSS 7」と互換性のある「Tailwind」を使用する。

まずは、アンイストールします。

npm uninstall tailwindcss

or

yarn remove tailwindcss

互換性のあるものをインストールします。

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

これで「tailwind」がwebpackでビルドできるようになりました。