Automatically clean up whitespace and duplicate class names

We just released a new version of prettier-plugin-tailwindcss which adds support for removing unnecessary whitespace and duplicate classes when sorting.

​Cleaning up unnecessary whitespace

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.

function MyComponent({ children }) {
  return (
    <div className=" mx-auto  max-w-7xl px-6 lg:px-8 ">
      {children}
    </div>
  )
}

​Removing duplicate classes

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.

function MyComponent({ children }) {
  return (
    <div className="flex bg-zinc-100 bg-zinc-100 px-4">
      {children}
    </div>
  )
}

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!