search

tw-in-js / twind

The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
https://twind.style
MIT License
3.73k stars 96 forks source link

Applying classes on Lit element CSS block #510

Open kadoshms opened 1 month ago

kadoshms commented 1 month ago

Hey!

I wonder if it's possible to use Twind classes within Lit elements styles block, some sort of the @apply decorator from Tailwind:

  static styles = css`
    :host button {
        @apply bg-blue-400;  
    }
  `;

That could be useful in cases I want to apply classes that are not necessary derived from reactive properties. I wonder if it is possible, or even reasonable.

sorvell commented 1 month ago

Just hacking around a bit, I was able to add host styles, but had to introduce a helper method. It wasn't clear how to process css from the twind API. Here's an example using a hostRules(this.tw, ...rules) helper: