Auto-complete problems with WebStorm/PhpStorm (an IDE related issue)

[Kurre]

There's an issue with WebStorm/PhpStorm which makes CSS frameworks like Tailwind a bit challenging to use.

Since there's escaped charactes in the class names, auto-completion in formentioned IDE's doesn't work as expected.

See YouTrack issue for more information: https://youtrack.jetbrains.com/issue/WEB-18947

If this one bugs you, it would be nice if you could go and give it a 👍
Hopefully it would be eventually fixed and we could enjoy fully functional auto-completion.

[HellPat]

I stumbled upon the same issue today.
Here a screenshot for clarification, thanks @Kurre that you resaearchedthe Link to youtrack.

[Kurre]

Issue has been fixed by Jetbrains and fix will be included in 2018.1 versions of IDEs.

[samuelterra22]

same problem in version 2018.2

[Kurre]

Seems to be working as expected for me:

PhpStorm 2018.2.1
Build #PS-182.3911.43, built on August 8, 2018
Licensed to Tommi Finnilä
Subscription is active until February 3, 2019
JRE: 1.8.0_152-release-1248-b8 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0

[samuelterra22]

I upgraded to 2018.3 EAP and it is not working yet

PhpStorm 2018.3 EAP
Build #PS-183.4139.30, built on October 31, 2018
PhpStorm EAP User
Expiration date: November 30, 2018
JRE: 1.8.0_152-release-1343-b15 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Linux 4.15.0-38-generic

[swthate]

I am using 2018.3 also. If you are using tailwind via Webpack, this may be of use:

I'm not sure, but I think PhpStorm will try to automatically find your Webpack config file based on the default naming convention (webpack.config.js I think), and from that it can figure out all it needs in order to get the code suggestions working. HOWEVER, if your Webpack config file is named differently, then you'll need to inform PhpStorm. It might be a good idea to look into this, regardless if your conf file is named differently or not.

Go to Preferences -> Languages & Frameworks -> JavaScript -> Webpack

From there just point it to your config file, and you should be set! That did the trick for me, at least.

Update:

I thought this fixed it for me, but it didn't take long to realize it in fact did not, but only a few autocomplete suggestions pop up now and then. It works fine in another project where I manually installed Tailwind without Webpack, but when trying to use https://github.com/chasegiunta/craft-vue-tailwind for Craft CMS which sets up Webpack and Tailwind for you, autocomplete does not work..

[LouizFC]

For those coming from google like me and still have problems with Tailwind Auto Completion:

I wanted to make Tailwind auto-completion work without building on every change.

I solved it by adding the following to my webpack.config.js file (I am using webpack-dev-server):

devServer: {
    writeToDisk: true
}

I think it's possible to add make it work without writing to disk, but I have not investigated further.

for reference, I got the solution from webpack/webpack-dev-server#1141 (comment)