prettier-plugin-tailwind-plus

Enhanced Prettier plugin with multiple formatting improvements:

• Tailwind CSS class sorting - Built-in sorting, no need for prettier-plugin-tailwindcss
• Multiline class formatting - One class per line for better readability
• Consistent ternary indentation - Fix Prettier's inconsistent ternary operator indentation

Features

Class Formatting

• ✨ Multiline formatting: Automatically formats class attributes that exceed printWidth
• 🎯 Tailwind CSS sorting: Built-in Tailwind class sorting (no need for prettier-plugin-tailwindcss!)
• 🔄 Toggle support: Switch between multiline and single-line with options
• 📝 One class per line: Better readability and easier code reviews
• 🚀 Works with HTML and Vue files (JSX/TSX support planned)
• ⚡ Smart skipping: Preserves short class lists and skips dynamic bindings (:class, v-bind:class, etc.)

JavaScript/TypeScript Formatting

• 🎨 Consistent ternary indentation: Fixes Prettier's inconsistent ternary operator indentation
• 📐 Uses tabWidth consistently: No more unexpected 2-space indents in ternary expressions

Installation

npm install --save-dev prettier-plugin-tailwind-plus
# or
bun add -D prettier-plugin-tailwind-plus

Usage

Add the plugin to your Prettier configuration:

// .prettierrc.js
module.exports = {
    plugins: ['prettier-plugin-tailwind-plus'],

    // Class formatting options
    multilineClass: true,           // Enable multiline class formatting (default: true)
    multilineClassSort: true,       // Sort Tailwind classes (default: true)
    multilineClassAlways: false,    // Always expand classes (default: false)

    // JavaScript/TypeScript formatting options
    ternaryConsistentIndent: true,  // Fix ternary operator indentation (default: true)

    // Standard Prettier options
    printWidth: 100,
    tabWidth: 4
};

Options

Class Formatting Options

multilineClass (boolean, default: true)

Enable or disable multiline class formatting.

multilineClassSort (boolean, default: true)

Sort Tailwind CSS classes in recommended order. No need for prettier-plugin-tailwindcss!

{
  multilineClassSort: true   // Classes will be sorted
}

multilineClassAlways (boolean, default: false)

Always expand classes to multiline, regardless of printWidth. Can be toggled - when set to false, short classes will collapse back to single line.

{
  multilineClassAlways: true   // Even short classes will be expanded
}

JavaScript/TypeScript Options

ternaryConsistentIndent (boolean, default: true)

Use consistent tabWidth indentation for ternary operator branches instead of Prettier's default inconsistent indentation.

// With ternaryConsistentIndent: true
cond === cond
    ? {
        obj_key: value,      // Proper tabWidth indentation
        obj_key2: value
    }
    : other;

// With ternaryConsistentIndent: false (Prettier default)
cond === cond
    ? {
          obj_key: value,    // Inconsistent indentation
          obj_key2: value
      }
    : other;

Example

Before

<div
    class="absolute rounded-full border-2 border-[#0D69A7] bg-white shadow cursor-grab active:cursor-grabbing hover:bg-gray-50 focus:outline-none"
    :style="thumbAStyle"
></div>

After

<div
    class="
        absolute
        rounded-full
        border-2
        border-[#0D69A7]
        bg-white
        shadow
        cursor-grab
        active:cursor-grabbing
        hover:bg-gray-50
        focus:outline-none
    "
    :style="thumbAStyle"
></div>

Rules

• Expands only when the class attribute line exceeds printWidth
• Indentation: attribute indentation + tabWidth spaces
• Supports both class and className attributes
• Skips dynamic bindings (:class, v-bind:class, [class], className={...})
• Skips empty class values
• Skips single-class attributes (no need to expand)
• Works with .vue, .html, .jsx, and .tsx files

Testing

cd prettier-plugin-multiline-class
node test/test.js

License

MIT