A blog probably of interest only to nerds by John Morton.

21May2019

Tail­wind­C­SS auto­com­plete in PHPStorm

Auto-complete with Tailwind in PHPStorm

PHP­Storm is a great code edi­tor. It’s filled with more options than I can com­pre­hend. Today I start­ed using the new Tail­wind CSS 1.0 build on a project. It changed the way col­or shades are ren­dered from the beta. Pre­vi­ous­ly I’d a plu­g­in to assist with auto-com­plete of CSS class names and the plu­g­in was sug­gest­ing the old CSS class names for col­ors. I knew some­where in PHP­Storm I could get this to work. If you’re in the same boat, the screen­shot above is the solution.

Open your pref­er­ences with CMD-, and go to the Direc­to­ries sec­tion. You’ll see in my screen­shot, the direc­to­ries in my node_modules fold­er were red, which means they were not being scanned for auto­com­ple­tion rules. Find your tailwindcss direc­to­ry and right click the dist direc­to­ry and set it as a source. Like mag­ic, auto­com­ple­tion of Tail­wind rules starts working.

This won’t get cus­tom CSS rules you might cre­ate in your con­fig file, but it will get all the default class­es to com­plete properly.