Autocompletion Tips For Tailwind Not Working In PHPStorm

Level 58

Certainly! Here’s a solution you can post on Laracasts for this question:

If Tailwind CSS autocompletion is not working in PHPStorm, here are some steps you can try to resolve the issue:

Check the Tailwind CSS Plugin
Make sure you have installed the official Tailwind CSS IntelliSense plugin for PHPStorm.
- Go to Settings (or Preferences on Mac) > Plugins
- Search for "Tailwind CSS"
- If it's not installed, install it and restart PHPStorm
Check Project Setup
Ensure you have a tailwind.config.js or tailwind.config.cjs file at your project root. The plugin relies on this file to enable autocompletion.
Validate Your File Types
Autocomplete works best in HTML, Blade, and JSX/TSX files. Make sure your file type is supported, for example: .html, .blade.php, .jsx, etc.
Check Language Injections in Blade Files
If you’re using Blade, ensure PHPStorm recognizes HTML/Blade content. If autocompletion isn’t working inside class attributes, try:
- Place your cursor in the class attribute and press Alt+Enter
- Choose "Inject language or reference" and select "HTML" This should enable proper autocompletion.
Invalidate Caches
Sometimes the cache gets corrupted.
- File > Invalidate Caches / Restart... > Invalidate and Restart
Check Tailwind CSS Version
Ensure Tailwind is installed in your project (package.json) and up to date. Run:
```
npm install tailwindcss --save-dev
```
Check for Conflicting Plugins
Disable any other CSS or HTML plugins that might conflict with the Tailwind plugin.
Check Auto Import Settings
- Go to Settings > Editor > General > Auto Import
- Make sure "Insert imports on paste" is enabled
Try a different theme
Sometimes, certain PHPStorm themes break auto-complete popup visibility. Try switching to a default theme.

If you have tried everything above and it still does not work, try reinstalling the Tailwind CSS plugin as a last resort.

Let me know if any of these steps fix your issue!