Fix Tailwind CSS Autocomplete Issues in WebStorm & VS Code

I encountered this issue a while back with Tailwind IntelliSense not working in WebStorm, despite having installed the Tailwind CSS plugin. I believe this happened because I was using the Tailwind CDN in a basic HTML, CSS, and JavaScript project.

Today, I decided to find a solution for the issue. This solution works for both Webstorm and VSCode.

To enable Tailwind autocompletion in your project, you must install Tailwind CSS.

Make sure to set up your project as a Node.js project by running the command ‘npm init’.

npm init

Once you have initialized your project, you can install Tailwind CSS by using the command below.

npm install -D tailwindcss

After installing tailwindcss, create a ‘tailwind.config.js’ file in your project’s root directory.

You can either leave the file empty or include a basic Tailwind configuration as shown below.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now, restart your IDE. You should now see autocomplete suggestions for Tailwind classes as you type.