Vanilla JavaScript support for Tailwind Plus

    <el-dialog-panel class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all group-data-closed/dialog:scale-95 group-data-closed/dialog:opacity-0 group-data-enter/dialog:duration-300 group-data-enter/dialog:ease-out group-data-leave/dialog:duration-200 group-data-leave/dialog:ease-in">

Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.

Oh yeah, when I open a typical big project with Tailwind I always love to see some:

  <div class="group relative w-full max-w-md mx-auto bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-lg p-6 md:p-8 transition-all duration-300 hover:shadow-xl hover:border-blue-500 dark:hover:border-blue-400">
  <div class="flex items-center justify-between mb-4">
    <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white tracking-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">Team Settings</h3>
  </div>
  <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed mb-6">Manage your team permissions, invites, roles, and integrations here. Changes apply instantly across all team workspaces.</p>
  <div class="flex flex-col sm:flex-row gap-4 sm:justify-end">
    <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors">Cancel</button>
    <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-300 transition-all duration-150">Save Changes</button>
    </div>
  </div>

This is like repeating code without using a function. If you have a nice abstraction - the same becomes cleaner like below.

<div class="group card">

  <div class="flex items-center justify-between mb-4">
    <h3 class="card-title">Team Settings</h3>
  </div>
  <p class="card-description">
    Manage your team permissions, invites, roles, and integrations here. Changes apply instantly across all team workspaces.
  </p>
  <div class="flex flex-col sm:flex-row gap-4 sm:justify-end">
    <button class="btn btn-cancel">Cancel</button>
    <button class="btn btn-save">Save Changes</button>
  </div>

</div>