Cannot find module 'prettier-plugin-tailwindcss

[osmancakir]

What version of prettier-plugin-tailwindcss are you using?

"prettier-plugin-tailwindcss": "^0.2.1"

What version of Tailwind CSS are you using?

"tailwindcss": "^3.2.4"

What version of Node.js are you using?

v18.13.0

What package manager are you using?

Yarn

What operating system are you using?

Windows

Describe your issue
Although I have installed everything in the correct order and can see the plugin in node_modules folder I get the error "Cannot find module 'prettier-plugin-tailwindcss'". I am using Vs Code. and developing with CRA.

My whole package.json

{
  "name": "project_name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@blaze_face": "^1.0.3",
    "@headlessui/react": "^1.4.2",
    "@heroicons/react": "^1.0.5",
    "@tailwindcss/forms": "^0.5.3",
    "@tensorflow/tfjs": "3.1.0",
    "@tensorflow/tfjs-backend-wasm": "3.1.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.21.1",
    "copyfiles": "^2.4.1",
    "date-fns": "^2.28.0",
    "formik": "^2.2.9",
    "i18next": "^20.3.1",
    "i18next-browser-languagedetector": "^7.0.1",
    "pkce-challenge": "^3.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.10.0",
    "react-redux": "^7.1.1",
    "react-router-dom": "6.0.1",
    "react-scripts": "5.0.0",
    "react-select": "^4.3.1",
    "react-table": "^7.7.0",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^2.1.3",
    "yup": "^0.32.11"
  },
  "scripts": {
    "wasm": "copyfiles tfjs-backend-wasm.wasm model.json group1-shard1of1.bin ./public",
    "start": "yarn wasm && WATCHPACK_POLLING=true react-scripts start",
    "build": "yarn wasm && react-scripts build",
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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.13",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.21",
    "prettier": "^2.8.2",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "source-map-explorer": "^2.5.2",
    "tailwindcss": "^3.2.4"
  }
}

prettier.config.js

module.exports = {
  singleQuote: true,
  semi: false,
  bracketSpacing: false,
  endOfLine: "lf",
  bracketSameLine: false,
  printWidth: 100,
  quoteProps: "as-needed",
  requirePragma: false,
  tabWidth: 2,
  trailingComma: "all",
  useTabs: false,
  plugins: [require('prettier-plugin-tailwindcss')],
}

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

postcss.config.js

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

[adamwathan]

What package manager are you using?

[osmancakir]

What package manager are you using?

Yarn

[adamwathan]

Super weird, can you provide a reproduction project?

[osmancakir]

I swear I didn't change anything but this morning when I come back to work, it is working.

[adamwathan]

I thought you heard me when I snuck into your house to fix it last night but I guess not! 🙌

[hzyhbk]

I had the same problem, but it was solved after I reload the vscode window. So reload the vscode window might be a solution to this problem.

[osmancakir]

I had the same thing happening again couple of days before. Yesterday night finally found something actually helped instead of needing @adamwathan to snuck into my house :). Go to your user settings.json in VSCode and delete the settings coming from prettier extension.

• setttings.json is found under File > Prefeerences > Settings. Go down until you see "Code Actions On Save" and click Edit in settings.json.

after deleting prettier config related lines mine working setttings.json looked like below;

{
    "workbench.colorTheme": "Default Dark+",
    "editor.tabSize": 2,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "git.autofetch": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "workbench.startupEditor": "none",
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "tailwindCSS.experimental.configFile": null,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.autoSave": "afterDelay",
    "editor.codeActionsOnSave": {
    }
}

Now everything is working again. It is formatting nicely and sorting classes. I kind of get the inspiration from this stackoverflow post.

[osmancakir]

Another update: you might encounter this problem again if you install clsx.

(adding this

 {
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
 }

to setting.json didn't help as the author suggested )

And If you do see,

• remove all related dependencies from your project. yarn remove tailwindcss postcss autoprefixer prettier prettier-plugin-tailwindcss
• remove your yarn.lock and node_modules and do a fresh install.
• Then run yarn add --dev tailwindcss postcss autoprefixer . after completion;
• then run yarn add --dev prettier prettier-plugin-tailwindcss

[yamanidev]

I had the same problem, but it was solved after I reload the vscode window. So reload the vscode window might be a solution to this problem.

I just did exactly just that and it works xD

[AmelloAster]

when i use pnpm to install plugins I get this error

[andershagbard]

I have this problem when using the GitHub action prettier_action.

As I see it, its a fairly simple action.

It runs:

npm install --silent prettier-plugin-tailwindcss

prettier WITH_SOME_VARS

Error:

Cannot find module 'prettier-plugin-tailwindcss'

Issue: creyD/prettier_action#111

[reinink]

Hey folks! So since we haven't been able to reproduce this ourselves, and since no one has provided a reproduction, and since it sounds like a bunch of you have already figured out workarounds here, I think we're going to close this issue for now. Happy to revisit this if anyone is able to provide a straightforward reproduction 👍