Install the official Tailwind CSS 5,202 IntelliSense extension for VS Code 550 (ID bradlc.vscode-tailwindcss). It autocompletes classes, warns about conflicts such as p-2 p-4, shows the generated CSS on hover and highlights directives. It uses your project's installed tailwindcss and its stylesheet, so custom theme colors appear in completions. JetBrains IDEs and Zed have Tailwind support built in. In VS Code, add "files.associations": { "*.css": "tailwindcss" } so directives are not flagged, and "editor.quickSuggestions": { "strings": "on" } for completions inside JSX strings.
The official prettier-plugin-tailwindcss 7,136 (https://github.com/tailwindlabs/prettier-plugin-tailwindcss 7,136 ) sorts classes in the order Tailwind generates CSS: non-Tailwind classes first, layout before decoration, overriding classes after the ones they override, then state variants such as hover:, with responsive variants last. Install it with npm 2,036 install -D prettier prettier-plugin-tailwindcss, create .prettierrc containing { "plugins": ["prettier-plugin-tailwindcss"], "tailwindStylesheet": "./src/style.css" }, and format a button written as class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800 rounded-lg shadow-md":
npx prettier card.html<button class="rounded-lg bg-sky-700 px-4 py-2 text-white shadow-md hover:bg-sky-800 sm:px-8 sm:py-3" > Save </button>