Hover and focus class definitions get missplaced.

[ma-g-ma]

An element which uses a tailwind focus or hover selector, will get it's css definition missplaced outside the css template literal.

e.g.

Input

export class MyElement extends LitElement {
    static styles = css`
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    `;

    render() {
        return html`
            <button class="hover:bg-gray-700" type="submit">
                                Submit
            </button>
        `;
    }
}

customElements.define('my-element', MyElement);

Output

export class MyElement extends LitElement {
    static styles = css`
/* ! tailwindcss v3.0.16 | MIT License | https://tailwindcss.com */

*,
::before,
::after{
  box-sizing:border-box;
  border-width:0;
  border-style:solid;
  border-color:#e5e7eb;
}

.
.
.

*, ::before, ::after{
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}
.static{
  position:static;
}
    `;

    render() {
        return html`
            <button class="hover:bg-gray-700" type="submit">
                                Submit
            </button>
        `;
    }
}

customElements.define('my-element', MyElement);.hover\:bg-gray-700:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(55 65 81 / var(--tw-bg-opacity))
    }

postcss.config.js

module.exports = {
  syntax: 'postcss-lit',
  plugins: {
    tailwindcss: {}
  }
}

Error

Hover definition appears outside the css template literal.

customElements.define('my-element', MyElement);.hover\:bg-gray-700:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(55 65 81 / var(--tw-bg-opacity))
    }

[ma-g-ma]

BTW, thank you so much for creating this plugin!

[43081j]

gah thats not great is it

thanks for the repro, ill see if i can have a look at it tonight 👍 feedback is much appreciated to iron these things out

[43081j]

its a bug in tailwind it seems, i've opened tailwindlabs/tailwindcss#7207

[ma-g-ma]

@43081j Thanks for looking in to it! Let's hope they can easily fix it.

[43081j]

@ma-g-ma please try the latest version: 0.4.3 and let me know if it works now

[ma-g-ma]

@43081j Wow, that was quick! Thank you so much, that worked.

[43081j]

no worries, thanks for raising the issue and testing 👍

Will close the issue as i've also updated the readme to mention this