When using tailwindcss in vscode, you may encounter issues where the plugin does not work, fails to auto-complete, and does not display class names in color. There are several methods to troubleshoot this issue.

The problems can be investigated in the following order.

  1. Check the Plugin’s Log Output Use Ctrl + Shift + P, search for tailwind css show output. Check the log for any errors. For instance, if there are errors related to missing dependencies. For example, if the log shows an error like Tailwind CSS: Can’t resolve ‘@headlessui/tailwindcss’, then installing the corresponding dependency can solve the problem.
npm i --save-dev @headlessui/tailwindcss
  1. File Not Included in tailwindcss Check if the file is included in tailwindcss. Open the tailwind.config.js file, and add the files that need to be included in the content field.
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,html.j2}",
    "./templates/**/*.html.j2",
    "./public/**/*.{html,js,css}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. vscode Not Enabling Quick Suggestions for String Inputs

Add the following configuration in vscode’s settings.

"editor.quickSuggestions": {
    "strings": true
}
  1. Plugin Not Activated for Certain Special File Formats

Due to Django’s Jinja template files, usually with a j2 extension, the vscode configuration needs to be modified as follows.

  "tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascript",
    "css": "css",
    "typescript": "typescript",
    "jinja-html":"html"
  },
  "files.associations": {
    "*.j2": "jinja-html"
  },
  "editor.quickSuggestions": {
    "strings": true
  }

Modify the tailwind.config.js file as follows, adding support for j2 format.

module.exports = {
  content: [
    "./src/**/*.{html,js,html.j2}",
    "./templates/**/*.html.j2",
    "./public/**/*.{html,js,css}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};