如何让VSCode的Tailwind CSS IntelliSense支持.html.eex和.html.leex文件？

I've run into this exact issue before—even though the Tailwind extension's source code says it supports HTML (EEx), the IntelliSense doesn't kick in automatically for those file types. Here's how to force it to work properly:

Step 1: Ensure File Language Mode is Set Correctly #

First, make sure VSCode recognizes your .html.eex/.html.leex files as the right language type:

• Open one of your .html.eex files
• Look at the bottom-right corner of the VSCode window—you'll see the current language mode (it might say something like "Plain Text" or "HTML" incorrectly)
• Click that language mode label, then select Configure File Association for '.html.eex'
• Choose HTML (EEx) from the dropdown. If this option isn't available, install the ElixirLS extension first—it adds proper EEx language support to VSCode. Repeat this for .html.leex files too.

Step 2: Update Tailwind Extension Settings #

Next, we need to tell the Tailwind CSS extension to treat these EEx file types as HTML for IntelliSense purposes:

1. Open VSCode Settings (press Ctrl+, on Windows/Linux or Cmd+, on macOS)
2. Search for tailwindcss.includeLanguages
3. Click Edit in settings.json
4. Add these lines to the config:

   "tailwindcss.includeLanguages": {
     "html-eex": "html",
     "html-leex": "html"
   }
   

Step 3: Configure Tailwind to Scan Your EEx Files #

Tailwind needs to parse your EEx files to generate accurate class suggestions. Update your tailwind.config.js file's content array to include these file patterns:

module.exports = {
  content: [
    "./**/*.html.eex",
    "./**/*.html.leex",
    // Don't forget to keep your existing content paths here too!
  ],
  // Rest of your Tailwind config...
}

Step 4: Reload VSCode #

Finally, reload your VSCode window to apply all changes:

• Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
• Search for and select Reload Window

After following these steps, the Tailwind IntelliSense should start showing up for your class names in .html.eex and .html.leex files. If it's still not working, double-check that you're running the latest version of the Tailwind CSS extension—older versions might have bugs with EEx file support.

内容的提问来源于stack exchange，提问作者Dmitry S.