src/blog/2024-05-30-prettier-plugin-collapse-whitespace/index.mdx
import { adamwathan } from "@/app/blog/authors"; import card from "./card.jpg"; import { Image, Video } from "@/components/media";
export const meta = {
title: "Automatically clean up whitespace and duplicate class names",
description:
"We just released a new version of prettier-plugin-tailwindcss which adds support for removing unnecessary whitespace and duplicate classes when sorting.",
date: "2024-05-31T16:30:00.000Z",
authors: [adamwathan],
image: card,
excerpt: (
<>
We just released a new version of prettier-plugin-tailwindcss which adds support for removing unnecessary
whitespace and duplicate classes when sorting.
</>
),
};
We just released a new version of prettier-plugin-tailwindcss which adds support for removing unnecessary whitespace and duplicate classes when sorting.
When you're copying around class names or deleting a class name from the middle of a list, it's easy to end up with some extra whitespace that needs to be cleaned up.
Now our Prettier plugin will handle this for you automatically, so you don't need to clean it up yourself.
<Video src="https://assets.tailwindcss.com/blog/2024-05-30-prettier-plugin-collapse-whitespace/collapse-whitespace.mp4" />Our VS Code extension has warned you about duplicate class names for a long time, but now our Prettier plugin can remove those duplicate classes for you automatically.
<Video src="https://assets.tailwindcss.com/blog/2024-05-30-prettier-plugin-collapse-whitespace/remove-duplicates.mp4" />To start playing with these improvements in your own projects, just install the latest version:
npm i prettier-plugin-tailwindcss@latest
If you run into any issues, let us know on GitHub!