# Editor and Formatting Tooling — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/p-tooling

> Autocomplete and consistent order.

## IntelliSense and class sorting

The official **Tailwind CSS IntelliSense** editor extension offers autocomplete, hover previews of generated CSS and linting for conflicting classes. The official **Prettier plugin** (`prettier-plugin-tailwindcss`) sorts classes in a consistent recommended order, so diffs stay small and duplicates are easy to spot. Together they make long class lists readable and reviewable.

## Maintainable at scale

Tooling, conflict handling and an upgrade path keep Tailwind projects clean as they grow.

![Four ideas: tooling, class conflicts, migrating from v3, checklist.](assets/figures/tailwind/section-8-map.svg) — Figure 8.1 — Tooling, conflicts, migration and checklist.

## Enabling class sorting

Prettier configuration.

```json
// npm install -D prettier prettier-plugin-tailwindcss
// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}
```

## Break long class lists across lines

Grouping classes by concern (layout, spacing, colour, states) on separate lines in templates improves reviews.

**Quiz:** What does prettier-plugin-tailwindcss do?

- [ ] Adds dark mode automatically
- [ ] Compiles Tailwind to JavaScript
- [ ] Removes unused HTML
- [x] Sorts Tailwind classes in a consistent order

*Answer:* Sorts Tailwind classes in a consistent order. Consistent ordering reduces noise.