Official VS Code Extension and Prettier Integration

Using utility classes speeds up styling, but it can make your HTML code hard to read as class strings grow. Let us configure tooling to automate code completion and clean up class list formatting.

1. Tailwind CSS IntelliSense (VS Code Extension)

The official Tailwind CSS IntelliSense extension is a must-have for VS Code developers. It adds autocomplete, syntax highlighting, and CSS preview features.

Core Features

• Autocomplete: As you type a class prefix (such as sh or bg-), it suggests classes (like shadow-lg or bg-red-500) along with a color swatch preview.
• Linting: Flags potential class conflicts (for example, applying both p-4 and p-8 on the same element) with a warning underline.
• Hover Preview: Hovering your cursor over a class reveals the exact raw CSS property mapping declaration (for example, hover:flex displays display: flex).

To install it, search for Tailwind CSS IntelliSense inside the VS Code Extensions Marketplace.

2. Automatic Class Sorting with Prettier

As elements accumulate styles, the class list strings can become disorganized:

<!-- Messy classes layout -->
<button className="text-white hover:bg-blue-600 bg-blue-500 font-bold p-4 rounded shadow-md">
  Click Me
</button>

To maintain code readability, it is best to organize classes in a consistent sequence:

1. Layout / Positioning (e.g., flex, grid, absolute)
2. Box Model (e.g., w-32, p-4, m-2)
3. Typography (e.g., text-lg, font-bold)
4. Visual Effects (e.g., bg-blue-500, rounded, shadow)

The official Prettier Plugin for Tailwind CSS automates this sorting order every time you save your file.

3. Installing and Configuring the Prettier Plugin

To install the sorting plugin in your project workspace, run this command:

# Install the prettier plugin package
npm install -D prettier prettier-plugin-tailwindcss

Next, create a .prettierrc configuration file in your root folder and add the plugin to the plugins list:

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

Now, when you save a file in VS Code, Prettier will automatically sort your class lists, keeping your HTML clean and uniform.