Tailwind CSS-in-JS

[GHNewbiee]

The purpose is to provide the new comers, who use Tailwind CSS in JavaScript to style components, with basic info for avoiding some common inconsistencies between CSS and JS.

With tailwindcss: 2.0.1 and LitElement: 2.4.0 the following issues exist:

• ` characters lying in the comments. Remove them, escape them, or replace them with another character e.g. ' or ".
• \. string in cases of decimal figures e.g. .space-y-0\.5. Replace them with another character/string e.g. _ and .space-y-0_5.
• \/ string in cases of parts e.g. .h-1\/2. Replace them with another character/string e.g. _ or of and .h-1_2 or .h-1of2.
• \32 string in cases of \32xl\:... eg. \32xl\:container. Replace them with another character e.g. x and xxl\:container.

Do you have a different experience to share? Are there more inconsistencies or better ways to avoid them? Please let us know.

[GHNewbiee]

For dev purposes, you can use Reboost, which supports LitElement out of the box, with LitCSSPlugin to avoid any kind of the above-mentioned manual modifications.