Tailwind with React, Vue, Laravel and Next.js

Setup at a glance

Conditional classes

In React and Vue, choose between complete class names; don't build them from pieces:

// Good: full class names Tailwind can find
<span className={status === "paid" ? "bg-emerald-100 text-emerald-700" : "bg-amber-100 text-amber-700"}>
  {status}
</span>

// Bad: "bg-" + color + "-100" never appears in your source code, so the CSS isn't generated
<span className={`bg-${color}-100`}>{status}</span>

In Vue: :class="{ 'bg-emerald-100 text-emerald-700': paid, 'bg-amber-100 text-amber-700': !paid }". Helpers like clsx make long conditions readable.

A component in plain HTML

<div class="m-6 max-w-md overflow-hidden rounded-xl border bg-white">
  <div class="flex items-center justify-between border-b px-4 py-3">
    <p class="font-semibold">Invoice #1042</p>
    <span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Paid</span>
  </div>
  <dl class="grid grid-cols-2 gap-y-2 px-4 py-3 text-sm">
    <dt class="text-gray-500">Customer</dt><dd class="text-right">Ada Lovelace</dd>
    <dt class="text-gray-500">Amount</dt><dd class="text-right font-semibold">$240.00</dd>
  </dl>
</div>

Component libraries

• shadcn/ui: copy-paste React components built with Tailwind and Radix.
• Headless UI and Radix: accessible behaviour (menus, dialogs) without styles; you add Tailwind classes.
• daisyUI, Flowbite: ready-made component classes on top of Tailwind.
• Tailwind Plus (formerly Tailwind UI): official paid component and template collection.