How to use tailwdind

In order to use tailwind with your customElement, do these steps respectively.

first import LitWithTw, tw:

import { LitWithTw, tw } from '../../shared/LitWithTw';

after importing, your code should look something like this:

@customElement('mh-accordion')
export class Accordion extends LitWithTw {
  // rest of your code
}

What is tw?

tw adds your styles in runtime and make it pleasant to look.

here is how you can use it:

<div class="${tw`w-full relative min-w-[300px]  bg-white rounded-md`}">
  // rest of your code
</div>