Part 6: Editor Setup, VS Code IntelliSense & Prettier Sorting

A professional development setup supercharges your productivity with autocomplete, hover documentation, and automated class sorting.

1. VS Code Extension: Tailwind CSS IntelliSense

Search for "Tailwind CSS IntelliSense" (by Tailwind Labs) in the VS Code Marketplace.

Key Features:

• Autocomplete: Start typing text- or bg- and get an instant list of options with color previews.
• Hover Previews: Hover over any class name (like px-4) to see the exact generated CSS rule (padding-left: 1rem; padding-right: 1rem;).
• Linting & Diagnostics: Highlights syntax errors or invalid class names.

2. Automatic Class Sorting with Prettier

The official Prettier plugin automatically sorts your utility classes according to Tailwind's recommended ordering (box model -> typography -> visual -> states):

npm install -D prettier prettier-plugin-tailwindcss

Create or update .prettierrc:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Now, every time you save a file, classes like:

<button class="text-white hover:bg-blue-700 bg-blue-600 p-4 rounded">

are automatically formatted into consistent, standard order:

<button class="rounded bg-blue-600 p-4 text-white hover:bg-blue-700">

Key Takeaways

• Install the official Tailwind CSS IntelliSense extension for autocomplete and hover CSS previews.
• Use prettier-plugin-tailwindcss to enforce consistent class ordering across your team.

In Part 7, we enter Module 2 to master the Box Model, Width, Height, and Sizing Utilities!