Typescript type annotations being removed

[Spoertm]

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

v0.6.9

What version of Tailwind CSS are you using?

v3.4.17

What version of Node.js are you using?

v21.5.0

What package manager are you using?

npm

What operating system are you using?

Windows

Describe your issue

const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
  // ...
};

The type annotations in Typescript are being removed. So the above code snippet is converted to:

const handleFileUpload = async (e: React.ChangeEvent) => {
  // ...
};

[yogiprsetya]

I have the same problem, I tried with other version but still get same problem.

[thecrypticace]

@Spoertm @yogiprsetya I think I've seen this once or twice in a project even without any plugins installed but this isn't the first report of this and I have no idea why or how this would happen.

Can either of you provide a reproduction alongside details about how you're using Prettier (like in VSCode, Zed, command line, etc…)?

[Spoertm]

@thecrypticace Mysteriously, when I now reinstall and use it, the bug isn't happening anymore 😅
I tried reproducing it with a new project with the same versions, or latest versions (of everything), but no dice.

Here's how to get to the same point at least:

I'm using VSCode with these (relevant) extensions:

• Prettier - Code formatter
• Prettier ESLint
• ESLint
• Tailwind CSS IntelliSense (pre-release)

1. Run npx create-next-app@latest (all default answers, just hit enter)

2. In the new project directory, run npm install --save-dev prettier prettier-plugin-tailwindcss

3. Add this to package.json:

"prettier": {
  "plugins": ["prettier-plugin-tailwindcss"]
}

4. Add this to page.tsx (or anywhere):

const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    // ...
};

5. Format the file (I use VSC's Format Document Shift + Alt + F)

I'd really like to know if you can reproduce it.

[slythespacecat]

I have never been able to use this plugin with typescript. Always deletes my types. Are you guys using it with typescript?

[thecrypticace]

@slythespacecat yeah I use it with TypeScript quite a lot

[slythespacecat]

@thecrypticace very interesting, I have no idea why it happens, but would love to be able to use it

I tried creating a new Nextjs app (npx create-next-app) no ESLint to try and isolate it. Disabled all my VS Code extensions but Prettier. added .prettierrc.js like so:

module.exports = { plugins: [ "prettier-plugin-tailwindcss", ], };

and prettier.config.js like so:

module.exports = { plugins: ['prettier-plugin-tailwindcss'] }

Then added this to the page.tsx file:

const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    // ...
};

Ran the formatter and it just gobbled the (edit: added spaces) < HTMLInputElement > part. Maybe a VS Code config thing? I have no idea. I've tried disabling everything I can find. Sorry I couldn't be of much help. It's a great plugin

[slythespacecat]

I've been able to set it up in a way that doesn't delete the type in the following example (and many like it, essentially, everytime there's a < Type > type declaration):

const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => { // ... };

Changed the prettier parser from typescript to babel-ts. I have no idea why it worked, but figured it might help someone smarter than me

[thecrypticace]

I wondered if the parser was at fault but at least for me the results are identical:

This is one thing I'd love to have some reliable reproduction of because it is so strange.

What did you do to change the parser when using in VSCode (also what version do you have installed?)

(I tried flow, babel-ts, and typescript all just to see what would happen)

[slythespacecat]

I've been able to replicate it, sort of. I noticed changing the parser to babel-ts on .prettier.config.js does nothing helpful, just deletes the type as previously. Changing the parser to babel-ts on .prettierrc.js file fixes the issue.

Is there anything I can do to help? I could upload the repo to my account, but I don't know if that'd help - it's really just the most create-next-app blank app imaginable. So I'm thinking it might be a VS Code thing, that in my case is fixed by changing the parser. But I don't know. Here's what works, and what doesn't work, in my case:

WORKS:

// .prettierrc.js

module.exports = {
  parser: 'babel-ts',
  plugins: ['prettier-plugin-tailwindcss'],
};

// .prettier.config.js

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

DOESN'T WORK:

// .prettierrc.js

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

// .prettier.config.js

module.exports = {
  parser: 'babel-ts',
  plugins: ['prettier-plugin-tailwindcss'],
};

And then all I'm doing is hitting save to format it, or "Format Document With...", and it always works with the first setup, never works (deletes types) with the second setup. I wish I could be more helpful. Let me know if I can help in any way! I'm very happy I can use it again eheh

EDIT: Sorry I forgot, these are all the latest versions of everything i believe. Here's the package.json:

{
"name": "tailwind-test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "15.1.3",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
"prettier": "^3.4.2",
"prettier-plugin-tailwindcss": "^0.6.9",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}