PhpStorm Autocomplete for Tailwind CSS not working - phpstorm

I currently have a NuxtJS (VueJS) project with Tailwind in it (latest versions).
I am using PhpStorm as editor.
For some reason I have no auto completion of suggestion for Tailwind CSS.
I have tried a lot of different things (anything I found on Google) but so far nothing helped.
Can anyone help me to find out what is wrong and how to fix this?
Latest thing I tried was a npm ci and Invalidate Caches/ Restart in PhpStorm but that did not help unfortunately.
I am using the latest version of PhpStorm.

Are you using "jit" mode? With it, code completion list is very limited, most of applicable CSS classes are not suggested. This will be fixed in the scope of WEB-50318, please follow it for updates.
Note also that, when using latest tailwindcss versions, the completion includes unrelated CSS classes from some *.test.css files. This will be fixed with the next tailwindcss package update, see https://github.com/tailwindlabs/tailwindcss/issues/4393. Workaround: delete node_modules/tailwindcss/jit/tests/ folder, it's not needed.

Ran into this problem with WebStorm and the previous answer diddnt solve my issue. However, I was able to solve it by instead of using mode: 'jit' in my tailwind config, by adding the --jit compiler option. Restart WebStorm afterwards.

Related

Tailwind arbitrary classes not applying without server restart

I'm using tailwind in my React project. The issue I've come across is that I can't use tailwind arbitrary classes(e.g. p-[115px]) without restarting the server. Although I've added mode: 'jit', to my tailwind.config.js but the issue still persists.
And the second thing is whenever I edit my code, it gets updated in the browser but I still have to refresh the page for inspecting my code and that gets annoying while debugging. Please suggest me solutions regarding these problems.
Note: I'm having "tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.7" in my package.json.

Visual Studio Code HTML snippets no longer working

I've been using HTML Snippets extension for HTML snippets in VSC for a while, however in my most recent project these have stopped working. I've tried researching why this is, and I can't find a straight answer on how to fix it. Being unable to use HTML snippets is severely limiting the speed of my html coding.
bro, the author has disabled this extension
Update 5
Disabling this extension as its functionality has been absorbed by VS Code main html extension.
Download
You can get the previous working version here, just remove the previously installed extension, also do not update this extension after installation

CSS selector not found error.? warning in VScode

A sudden warning message came in while I was working on my project, It is showing that CSS class is not found but in my code every class is linked in CSS. Can anyone help me out with this? Why is this sudden warning.
Remove HTML CSS Support extension from VS code because it causes this issue in latest update or you can downgrade the extension version.

Getting an earlier version of 4.x

I need a fresh download of FA version 4.0.3 as the CMS I use contained a damaged copy. I tried using the latest (4.7.0 at this time), but CSS changes in the .fa selector cause placement issues. I'd like to roll back to 4.0.3 to maintain compatibility until we can do a whole-site regression test for this type of bug once we upgrade.
Instead of complaining in the comments, I'll just drop this in here as a weak answer.
Either you download and stash it somewhere because you need to make changes (and then reference the CSS and other assets in the appropriate way as desribed on the Get Started page) or you use a reference to a CDN in a link to a stylesheet, in which case you can specify the version in the URL.
It sounds like you are doing the former, but you should be sure. Maybe you can just use the CDN link? At any rate, you can fetch 4.0.3 from the GitHub repo
I was able to get a hold of v4.0.3 via the GitHub Releases feature.
Having done that, I discovered that somebody had modified the CSS file in our CMS to add margin-right: 5px -- and it was one of the CMS's developers! Naughty, naughty!
SO, the 'incompatibility' I saw was not between the official, unmodified 4.0.3 and 4.7.0 versions of FA. Sorry about the false alarm! And thanks for your help. :)

Pycharm and HTML tags

Just updated Pycharm, and now it won't recognise any of my HTML tags. Do you also have this issue, or have I messed with some settings? A few days ago I changed a few of the HTML settings, but can't really remember what I did...
So, all of the yellow marked tags are not recognised by Pycharm anymore? I have no idea what I've done to cause this, unless its an update issue, but I searched online and could not find others with the same problem.
Had the same problem. Reading through this bug report I tried the following:
File | Invalidate caches
Worked like a (py)charm ;)
Delete your .idea folder, and then restart pycharm.
If you can refine your post, we'll be able to help you; can you point to a hi-lighted tag with your mouse and read the warning on pycharm status bar. Also you can do this by pointing to the warning indicators on the right in front of each line. Here are some things you can check:
settings/code style/html bring it back to defaults
settings/inspection bring it back to defaults
settings/file types choose html and check the registered patterns, it may be broken, you should find *.(htm, html, sht, shtm, shtml)
you could also un\re-install html tools plugin.