@txfs19260817/rollup-plugin-lit-tailwindcss

rollup-plugin-lit-tailwindcss

import litTailwind from 'rollup-plugin-lit-tailwindcss';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'dist',
  },
  plugins: [
    litTailwind({
      include: 'src/components/**/*.ts',
      placeholder: 'tw_placeholder',
      placeholder: undefined,
    }),
  ],
};

Then in lit component file:

import { html, css, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('simple-footer')
export class SimpleComponent extends LitElement {
  static styles = css`tw_placeholder`; // 👈 classes will be injected here

  render() {
    return html`<h1
      class="text-purple-400 md:text-red-400 md:hover:text-green-500"
    >
      Hello, world!
    </h1>`;
  }
}