prettier-plugin-tailwind-suggestions

A Prettier plugin that automatically formats and converts Tailwind CSS classes to their canonical equivalents upon saving.

This plugin intercepts Prettier's formatting process to evaluate your classes against your actual Tailwind design system. It handles complex arbitrary value mappings that standard regex-based formatters cannot.

Installation

npm install -D prettier-plugin-tailwind-suggestions tailwindcss

Configuration

Add the plugin to your Prettier configuration file (e.g., .prettierrc or prettier.config.js):

{
  "plugins": ["prettier-plugin-tailwind-suggestions"]
}

Using alongside prettier-plugin-tailwindcss

If you are also using the official Tailwind CSS class sorting plugin, you can chain them together. Ensure the suggestions plugin runs first so classes are canonicalized before they are sorted:

{
  "plugins": [
    "prettier-plugin-tailwind-suggestions",
    "prettier-plugin-tailwindcss"
  ]
}

Supported Parsers

This plugin hooks into Prettier's preprocess lifecycle and supports:

• React / Next.js (babel, typescript)
• Vue (vue)
• Angular (angular)
• HTML (html)

Author

Created by Anbuselvan Annamalai.

License

MIT License © Anbuselvan Annamalai