Warining autoprefixer: Replace color-adjust to print-color-adjust

[gremo]

What version of Tailwind CSS are you using?

3.0.24

What build tool (or framework if it abstracts the build tool) are you using?

@symfony/webpack-encore 1.8.2 and postcss 8.4.13

What version of Node.js are you using?

v14.18.1

What browser are you using?

N/A

What operating system are you using?

Windows

Describe your issue

(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

Running yarn encore dev with the following app.css:

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

PostCSS configuration:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
};

[gremo]

I've just found out that the problem is related to https://github.com/tailwindlabs/tailwindcss-forms

[arunavo4]

@gremo I also got the same issue:

warn  - ../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
Warning

(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

../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
Warning

(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

../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
Warning

(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
wait  - compiling...
warn  - ../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
Warning

(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

../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
Warning

(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

../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
Warning

(1:1) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/arunavoray/Documents/Development/Gameplex/Electron/GameplexWallet/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!/Users/arunavoray/Documents/Development/Gameplex/Electron/GameplexWallet/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!/Users/arunavoray/Documents/Development/Gameplex/Electron/GameplexWallet/renderer/src/styles/globals.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 3 items } -> webpack/lib/ModuleWarning -> Warning

My package.json does not have tailwindcss-forms

"devDependencies": {
    "@headlessui/react": "^1.5.0",
    "@heroicons/react": "^1.0.6",
    "@solana/spl-token": "^0.2.0",
    "@solana/web3.js": "^1.41.3",
    "@types/lodash.get": "^4.4.7",
    "@types/node": "^14.14.31",
    "@types/react": "^17.0.0",
    "autoprefixer": "^10.4.4",
    "classnames": "^2.3.1",
    "date-fns": "^2.28.0",
    "electron": "^17.1.2",
    "electron-builder": "23.0.2",
    "flowbite": "^1.4.4",
    "flowbite-react": "^0.0.20",
    "lodash.get": "^4.4.2",
    "next": "^12.1.0",
    "next-themes": "^0.1.1",
    "nextron": "^8.0.0",
    "postcss": "^8.4.12",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.38.1",
    "superstruct": "^0.15.4",
    "tailwindcss": "^3.0.23",
    "typescript": "^4.6.2"
  }

How did you solve this?

[cjlaborde]

Same problem here

Module Warning (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):                                                                                                                                                                                                                                                                                                                                                     friendly-errors 20:09:45
Warning

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
                                                                                                                                                                                                                                                                                                                                                                                                                                                 friendly-errors 20:09:45
 @ ./node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css 4:14-207 15:3-20:5 16:22-215
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

[cjlaborde]

Solved it by installing

npm install -D @tailwindcss/forms

[Emokores256]

I have @tailwindcss/forms already installed but I still get the error. Tried reinstalling the package but still, the error shows up

[gremo]

@tailwindcss/forms fixed this starting from 0.5.1 make sure u are running that version @Emokores256, if unsure:

yarn add @tailwindcss/forms@^0.5.1

[willvincent]

Ensuring I had @tailwindcss/forms@^0.5.1 installed removed some of my warnings, to get the rest I also had to upgrade autoprefixer to autoprefixer@10.4.5 👍

[Emokores256]

It still gives me the error. I updated @tailwindcss/forms to ^0.5.1

On Thu, May 12, 2022, 20:19 Will Vincent @.***> wrote:

Ensuring I had @tailwindcss/forms@^0.5.1 installed removed some of my warnings, to get the rest I also had to upgrade autoprefixer to @.*** 👍

— Reply to this email directly, view it on GitHub https://github.com/tailwindlabs/tailwindcss/issues/8256#issuecomment-1125240999, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEEQBX542C7ZRJXZE7DHMDVJU4SFANCNFSM5U6HD2MA . You are receiving this because you were mentioned.Message ID: @.***>

[mel0620]

I got the same error using the latest version of autoprefixer so I install the 10.4.5 version and it solved the error.

[Braunson]

I'm getting this using Vite

"tailwindcss": "^2.1.2",
"@tailwindcss/aspect-ratio": "^0.2.1",
"@tailwindcss/forms": "^0.3.3",
"@tailwindcss/typography": "^0.4.1",

[14714]

My solution was the next: npm install tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms@latest

[sk8Guerra]

@14714 That solved it to me too. Thanks. Basically updating all of the packages to the latest version.