Why can't Prettier find the "prettier-plugin-tailwindcss" plugin on a Remix app?

Question

Background

I'm trying to setup a Remix app using Tailwind CSS for styling and Prettier for styling. Recently the Tailwind team released their official classes-sorting plugin but for some reason Prettier says it "can't find it".

The error looks like the following in the Prettier output:

    ["INFO" - 1:17:09 PM] Formatting file:///home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx
    ["ERROR" - 1:17:09 PM] Error resolving prettier configuration for /home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx

My file structure (files related to the problem) looks like this:

    /prettier.config.js
    /tailwind.config.js

/package.json

    "devDependencies": {
        "@remix-run/dev": "^1.1.3",
        "@remix-run/serve": "^1.2.2",
        "@types/node": "^17.0.21",
        "@types/react": "^17.0.24",
        "@types/react-dom": "^17.0.9",
        "autoprefixer": "^10.4.2",
        "concurrently": "^7.0.0",
        "dotenv": "^16.0.0",
        "postcss": "^8.4.6",
        "prettier": "^2.5.1",
        "prettier-plugin-tailwindcss": "^0.1.8",
        "prisma": "^3.10.0",
        "tailwindcss": "^3.0.23",
        "typescript": "^4.1.2"
      },
      "engines": {
        "node": ">=14",
        "yarn": "1.22.17"
      },

Prettier config 

`/prettier.config.js`

    module.exports = {
      plugins: [require('prettier-plugin-tailwindcss')],
    };


> When hovering over that "require" I get an error that says:

module "/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index"
Could not find a declaration file for module 'prettier-plugin-tailwindcss'. '/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/prettier-plugin-tailwindcss` if it exists or add a new declaration (.d.ts) file containing `declare module 'prettier-plugin-tailwindcss';`ts(7016)```

Answer 1

I encountered this problem too before. Though I just tried adding the Tailwind Prettier plugin to a new Remix project and everything seems to be working. Here are the steps I performed:

1. Installed Tailwind npm install -D tailwindcss postcss autoprefixer concurrently

2. After finishing all the steps outlined in the link above, I ran npm install -D prettier prettier-plugin-tailwindcss

I don't have a prettier config file in place. I'm able to run Prettier through vscode and I can confirm that the Tailwind classes are automatically sorted.