Vanilla JavaScript support for Tailwind Plus

Re:Vanilla JavaScript support for Tailwind Plus by murukesh_s on Saturday July 26, 2025 @09:34PM (#44698211)

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

  <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>

[ Parent | on HN ]

Re:Vanilla JavaScript support for Tailwind Plus by interstice on Sunday July 27, 2025 @06:35AM (#44700284)

Isn't this abstraction essentially just.. creating classes?

[ Parent | on HN ]

Re:Vanilla JavaScript support for Tailwind Plus by gloosx on Monday July 28, 2025 @02:49AM (#44707940)

Such a pleasure to see a nice tailwind abstraction, at some point inlining starts looking just a bit too much, luckily there is a solution ;)

  /\* tailwind.css \*/
  .card-container {
    @apply flex flex-col md:flex-row items-center justify-between
      w-full max-w-screen-xl px-6 md:px-12 py-8
      bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700
      rounded-lg shadow-md space-y-6 md:space-y-0 md:space-x-8
      text-sm text-gray-700 dark:text-gray-300 font-medium tracking-tight leading-relaxed
      hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-300 ease-in-out;
  }

[ Parent | on HN ]