Discussion on: Using tailwind at build-time with lit-element

View post

Thanks a lot for the guide.
This was very helpful for setting up our litelement project. But, when trying to use some variants with tailwind (like hover: or focus:), we found that we couldn't use the class defined by tailwind due to a lit element issue : github.com/Polymer/lit-element/iss... .

In order to complete the guide, we fixed the problem by adding the following package :
github.com/gridonic/postcss-replace

npm install postcss-replace

and the following configuration in postcss.config.js :

module.exports = {
  syntax: require('@stylelint/postcss-css-in-js'),
  plugins: [
    require('tailwindcss')(),
    require('postcss-discard-comments')(),
    require('postcss-discard-empty')(),
    require('postcss-replace')({pattern: ':', data: {replaceAll: '\\:'}}),
  ]
};