TailwindCSS autocomplete in PHPStorm
PHPStorm is a great code editor. It’s filled with more options than I can comprehend. Today I started using the new Tailwind CSS 1.0 build on a project. It changed the way color shades are rendered from the beta. Previously I’d a plugin to assist with auto-complete of CSS class names and the plugin was suggesting the old CSS class names for colors. I knew somewhere in PHPStorm I could get this to work. If you’re in the same boat, the screenshot above is the solution.
Open your preferences with
CMD-, and go to the Directories section. You’ll see in my screenshot, the directories in my
node_modules folder were red, which means they were not being scanned for autocompletion rules. Find your
tailwindcss directory and right click the
dist directory and set it as a
source. Like magic, autocompletion of Tailwind rules starts working.
This won’t get custom CSS rules you might create in your config file, but it will get all the default classes to complete properly.