Tailwind classes in Components

[sebilasse]

Hello, changed everything from twind to tailwind.

Maybe it could be documented that currently all classes in components need to be named explicitly.

Let's say I have an encoded link component for mailto: or tel: links and it has

interface {
  type?: 'mail'|'phone'
}

This will not work:

  <a class={`redaktor-link-${type}`}></a>

but this would

  <a class={type === 'phone' ? `redaktor-link-phone` : `redaktor-link-mail`}></a>

Not sure if this could be done with the reflection API or if there are better ideas :)

[marvinhagemeister]

Good point, compared to twind, tailwind analyses the source code instead of running it. It cannot detect split up tailwind class names. We should add a note for that in our docs.

[sebilasse]

If we have more class-choices than just two, one can also create a plugin, see https://tailwindcss.com/docs/plugins#dynamic-utilities

Done that a lot, works fine, got e.g.: baseline solid typo and ui variants and all the colors and ActivityPub stuff. Will keep you updated :)