awesome

awesome copied to clipboard

Awesome Contribution Checklist:

• [x] I have read, and re-read the Contributing Guidelines
• [x] I have searched to ensure the suggested item doesn't exist on this list
• [x] This PR contains only one item

Please Provide a Link A Repository for Your Addition

https://github.com/ouweiya/rollup-plugin-tailwindcss-lit

Please Describe Your Addition

Using Tailwind CSS in Lit, importing CSS as modules, and supporting inline CSS compilation.

Compile CSS modules

import styles from 'index.css';

@customElement('my-element')
class One extends LitElement {
    static styles = [styles];

    render() {
        return html`<p class="text-blue-500">Hello</p>`;
    }
}

Compile inline CSS

static styles = [
    styles,
    css`
        :host {
            @apply text-blue-600;
            width: 100px;
        }
    `,
];

After compilation

static styles = [
    styles,
    css`
        :host {
            width: 100px;
        }
        :host {
            --tw-text-opacity: 1;
            color: rgb(37 99 235 / var(--tw-text-opacity));
        }
    `,
];