@clerk/tailwindcss-transformer

Warning

This is an experimental package and breaking changes may occur regularly. Usage at your own risk!

Input:

export function Example({ flag }) {
  let className = cn('absolute inset-0', flag && 'uppercase');
  return <div className={cn('flex items-center text-sm', className)} />;
}

Ouput:

export function Example({ flag }) {
  let className = cn('cl-7601190e', flag && 'cl-d2cf63c7');
  return <div className={cn('cl-f64ae6a6', className)} />;
}

.cl-7601190e {
  @apply absolute inset-0;
}

.cl-d2cf63c7 {
  @apply uppercase;
}

.cl-f64ae6a6 {
  @apply flex items-center text-sm;
}

.cl-7601190e {
  position: absolute;
  inset: 0;
}

.cl-d2cf63c7 {
  text-transform: uppercase;
}

.cl-f64ae6a6 {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

License

This project is licensed under the MIT license.

See LICENSE for more information.