title: How to scope Tailwind Css
body: <p>I cannot find a good way to scope tailwind CSS when including it in a system where I don't want it to apply globally that works with custom build options.</p>
  <p>Essentially I want to do this:</p>
  <pre><code>.tailwind{
      @import &quot;tailwindcss/base&quot;;
  
      @import &quot;tailwindcss/components&quot;;
  
      @import &quot;tailwindcss/utilities&quot;;
  }
  </code></pre>
  <p>But PostCSS importer doesn't like this due to the fact it imports before the tailwind placeholders are replaced.  So the only way to make it work is to break the build into 2 stages then import the compiled css like:</p>
  <pre><code>.tailwind{
      @import &quot;tailwindcss.css&quot;;
  }
  </code></pre>
  <p>It works but it breaks some of the css rules which show up in dev tools.</p>
  <p>Is there a better way to scope tailwind to stop it interfering with other systems?</p>