Easy way to scope tailwind from outside css

[knotri]

use case:

using tailwind with 3rd party CSS
using tailwind in chrome extension content script

problem:

tailwind could interact with other websites CSS code.

existing solution:

official documentation recommends using prefix, but then it requires u to manually write it each time in every class in your html/jsx
I been also looking several threads on tailwind github with similar questions, and stack overflow, but so far, didn't found a solution.

what I am looking for

Allow me to use tailwind ONLY inside my wrapper.

<div class="myUniqId"> 
  all my code with Tailwind live here
  <div className="m-4">example</div>
</div>
--------
.myUniqId {
    @import "tailwindcss";
}

version

I been struggle with this problem in v3 as well as v4

[Inventoris]

Hi @knotri!

I recommend taking a closer look at tailwindcss-scoped-preflight. This plugin allows you to avoid style conflicts by isolating tailwind styles.

[philipp-spiess]

Hey! You can actually do this in v4 by ejecting out of the @import "tailwindcss"; import and instead defining your utilities boundary inside a nested selector. Here's an example: https://play.tailwindcss.com/FBdy9MfmP2?file=css

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@layer utilities {
  #root {
    @tailwind utilities;
  }
}

[FluffyDiscord]

@philipp-spiess could you please show me small example with @utility, @plugin and @apply? it says that nesting that is not supported(?)

I want to use container utility and typography plugin and apply TW classes inside boundary, eg the example #root selector

[philipp-spiess]

I'm not sure what specific problem you have but @utility works regardless of pulling out the utilities import: https://play.tailwindcss.com/YjEedhvzcW?file=css

[FluffyDiscord]

I think this might better explain what I am looking for:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

@layer utilities {
  #root {
    @tailwind utilities;
    @plugin '@tailwindcss/typography';
    @utility container {
      padding-inline: 2rem;
    }
  }
}

With this, everything tailwind related would be scoped to the #root HTML element.

[philipp-spiess]

Plugin and utilities are global in the Tailwind CSS config, there is no concept of utilities that only work for some scoped area, sorry!