Please install PostCSS 8 or above

[babakfp]

Do I need to kill myself to Tailwind work properly?

  "scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "tailwind": "postcss build ./static/css/src/tailwind.css -o ./static/css/dist/tailwind.css"
  },
  "dependencies": {
    "autoprefixer": "^10.1.0",
    "compression": "^1.7.1",
    "polka": "next",
    "postcss": "^8.2.1",
    "postcss-import": "^14.0.0",
    "postcss-nested": "^5.0.3",
    "sirv": "^1.0.0",
    "tailwindcss": "^2.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@rollup/plugin-babel": "^5.0.0",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "@rollup/plugin-replace": "^2.2.0",
    "@rollup/plugin-url": "^5.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "sapper": "^0.28.0",
    "svelte": "^3.17.3"
  },

[simonswiss]

Please don't kill yourself 🤗

If you're hitting issues with needing PostCSS 8, you can always use the PostCSS compatibility build version of Tailwind, which exists for this exact reason.

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

100% of the Tailwind v2 features are available as well in this build, so you won't be missing out on anything 👍

[babakfp]

It's didn't worked. Same error.

"dependencies": {
  "@tailwindcss/postcss7-compat": "^2.0.2",
  "autoprefixer": "^9.8.6",
  "compression": "^1.7.1",
  "polka": "next",
  "postcss": "^7.0.35",
  "sirv": "^1.0.0",
  "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2"
},

What about these two:

"postcss-import": "^14.0.0",
"postcss-nested": "^5.0.3",

[adamwathan]

Those two dependencies require PostCSS 8, you will have to downgrade to postcss-import@^12 and postcss-nested@^4 if you want to use PostCSS 7. I'm not sure what dependency in your project is forcing you to use PostCSS 7 at quick glance though, guessing something to do with Sapper?

Regardless going to close this as not a real issue, there is nothing we can change in the Tailwind codebase that will fix this, you just need to make sure you are installing compatible versions of your dependencies.

We can help more in the future if you follow the issue template and provide an actual GitHub repository that reproduces your issue.

[babakfp]

Hi.

It seems that you don't care that people have a problem. All you provide was just a very short post that was saying if you did get this error, do this. Don't get me wrong, it's a great tool and blah blah blah, I'm just saying that if you do something, do it well.

It took me so much(x10) time but I finally solved it.

• It wasn't related to Svelte or Sapper.
• I didn't do any version change on anything.
• Or any other weird stuff ...

1. I removed all dependencies related to Tailwind and Postcss from my local project (a Sapper project).
2. I globally added the latest version of postcss and postcss-cli:

   yarn global add postcss@latest postcss-cli@latest

3. Then I added the dependencies I need to my project:

   yarn add tailwindcss@latest autoprefixer@latest postcss-nested@latest postcss-import@latest

I expect that you make the postcss error post better and also add those to the post.

@adamwathan

[CharukaTharindhu]

Please install PostCSS 8 or above error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. please help me

[RahulUD]

I was facing the same issue but this worked for me "postcss-cli": "^7.1.2", "postcss-import": "^12.0.0", "postcss-nested": "^4.0.3", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0"

[charuka-dissanayaka]

this command worked for me. npm install -D tailwindcss@latest postcss@latest autoprefixenpm install -D tailwindcss@latest postcss@latest autoprefixer@latestr@latest

[garytron]

Hi! I was researching and trying to fix this issue, and this worked for me:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

My package.json is:

{
  "name": "tailwindcssreact",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.24.0",
    "postcss-import": "^14.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.3.11",
    "postcss-cli": "^9.0.1",
    "tailwindcss": "^2.2.19"
  }
}