How to whitelist or Safelist, attribute selectors with purgeCSS (Tailwindcss)?

Question

I am trying to use a Tailwindcss RTL plugin, which generates some classes starting with [dir=rtl] or [dir=ltr]. But due to Purge CSS is removing it regardless of it's use.

Answer 1

Here is how I solved this Because pure CSS is dumb, it looks for the strings that match the content it needs to purge. So to fool it, we can simply add the classes or attributes which we want to be saved.

like this

<main class="[dir=rtl] [dir=ltr] container">
{some content}
</main>