twl

Write long Tailwind class names across several lines, with comments, and pay nothing for it at runtime.

What you write

import { cls } from 'twl/macro'

const button = (
  <button
    className={cls`
      // layout
      inline-flex items-center gap-2 rounded-md
      // interaction
      cursor-pointer disabled:opacity-50
      ${variant}
    `}
  />
)

What ships

import { clsx as __twl_clsx } from 'twl'

const button = (
  <button
    className={`inline-flex items-center gap-2 rounded-md
cursor-pointer disabled:opacity-50
${__twl_clsx(variant)}`}
  />
)

Newlines and comments

Group class names the way you think about them, annotate the groups, and let the compiler fold it all into one string.

Nothing left at runtime

A static template becomes a string literal. A static tw template has its tailwind-merge resolved at build time too.

Works without the plugin

The macro entry exports the real runtime, so tests and scripts keep working. Only the cost differs.

Every bundler

Vite, Rollup, Rolldown, webpack, Rspack, esbuild and Farm through unplugin — and Turbopack through its own loader.