Set up Tailwind help in VS Code

Tailwind IntelliSense can explain utility classes while you edit. A formatter can sort them consistently. Neither tool generates the project’s stylesheet or fixes inaccessible markup.

Enable IntelliSense

Install the official Tailwind CSS IntelliSense extension from Tailwind Labs in VS Code. The project also needs Tailwind installed. For version 3, the extension looks for a Tailwind config; for version 4, it looks for a CSS entry point importing Tailwind.

Open an HTML file in that workspace and type a class such as flex. Check completion and hover information. If nothing appears, run “Tailwind CSS: Show Output” from the command palette and inspect project detection. Use the extension’s documented explicit project configuration when automatic detection finds the wrong root.

Optional class sorting

The current Tailwind Prettier plugin requires Prettier 3 and uses ESM. In a compatible practice project, install prettier@3 and prettier-plugin-tailwindcss as development dependencies. A JSON Prettier configuration can include:

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

That config path is for Tailwind 3. For version 4, use the documented tailwindStylesheet option pointing to the CSS entry file. Do not load the current plugin with require(); the old example on this page did that.

Verify before formatting a project

Run the formatter on one practice file, inspect its diff, then check hover output against your actual theme. This repository still has Prettier 2 in its existing dependencies; adopting a newer formatter here would require a deliberate dependency update. This lesson does not silently perform one.

Use one class sorter rather than competing on-save sorters. Sorting is an editorial convenience, not proof that the cascade or markup is correct. Continue with the versioned setup guide.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.