TailwindCSS autocompletion in PhpStorm not working

Question

I just updated PhpStorm to version 2020.3 which now supports autocompletion for Tailwind CSS. But in my new updated version it isn't working and can't figure out why.

In html, blade and css files, there is no autocompletion for Tailwind CSS.

Do I have this enable somewhere? Why isn't it working?

Ballade

Check original ticket for possible requirements etc: youtrack.jetbrains.com/issue/WEB-42792 . The way how TailwindCSS package is installed / used Tailwind version may affect this. Check the ticket comments and look at related tickets. Other tickets (so you may browse through them): youtrack.jetbrains.com/issues/WEB?q=tailwind . blog.jetbrains.com/webstorm/2020/11/webstorm-2020-3-eap-7/… – Larynx

Answer 1

Looks like there is an bug when using npm installer and when you are using version npm:@tailwindcss/postcss7-compat@^2.0.1 of tailwind.

source https://youtrack.jetbrains.com/issue/WEB-48473

My solution: delete node_modules and use yarn install

Ballade

Lol, still working on 2022.3.1... Thanks mate! Just run npm i npm:@tailwindcss/postcss7-compat@^2.0.1 I'm using tailwind 3 – Dugaid

Answer 2

I solved by downloading the tailwindcss library.

Progression

Answer 3

Just had this issue with a new Vue project, solved it by going to:

Settings -> Languages & Frameworks -> Style Sheets -> Tailwind CSS

And adding the following to the "includeLanguages" section:

      "scss": "scss",
      "html": "html",
      "javascript": "javascript",
      "typescript": "typescript",
      "css": "css",
      "vue": "vue",
      "sass": "sass",
      "twig": "twig"

Seems like it doesnt include all files and languages by default.

Paver

Confirmed working in Webstorm 2024.1 - thanks – Massimiliano

I needed to add "twig": "twig" – Wenger

@Wenger I added it in, thanks. – Paver

Answer 4

if you are using a node version manager check that your project Language & Frameworks configuration for Node.js and NPM is actually using the same node version where you installed tailwind and postCSS packages

Carrillo

Any tips on how to do this? I am so new to tailwinds and only really do PHP – Wilburwilburn

Answer 5

To fix the problem, update to version 2021.3.1. Do not look for another solution because it does not exist enter image description here

Condensate

I had an issue with 2021.3.1 but after upgrade to PhpStorm 2021.3.2 works fine. – Doublethink

Answer 6

Just had the same problem with 2023.1.1 in a javascript project, seems to be an reoccuring problem. Nothing helped, not reinstalling tailwindcss or removing .idea. I couldnt even update the IDE because of its bugged update feature. Had to uninstall it and download the new version 2023.1.4, then it worked.

Transfix

It's a joke how it works then doesn't work then works without any changes again. Maybe it is on a tea break or popped out for a cigarette? – Slype

Answer 7

I solved the problem by select the node_module folder in libraries configuration :

Asymmetric

Answer 8

For anyone still struggling with this issue and hasn't figured out why, the problem is that PhpStorm enters power saving mode. You need to disable it, and then everything will start working again. I discovered this after many hours of troubleshooting.

Appurtenant