Enforces a consistent order for the Tailwind CSS classnames, based on the compiler

⚠️ This rule warns in the ✅ recommended config.

🔧 This rule is automatically fixable by the --fix CLI option.

The ordering is solely done using the order process from the official prettier-plugin-tailwindcss.

Rule Details

Examples of incorrect code for this rule:

<div
  class="text-gray-700 shadow-md p-3 border-gray-300 ml-4 h-24 flex border-2"
></div>

Examples of correct code for this rule:

<div
  class="ml-4 flex h-24 border-2 border-gray-300 p-3 text-gray-700 shadow-md"
></div>

Why the classnames order matters?

• 🤓 Improved readability
• 🛠️ Easier maintenance & debugging
• 🤝 Predictable class merging
• 🙏 Smoother collaboration
• 😅 Less merge conflicts

Options

There are no specific options for this rule, yet it uses the general settings.