How to make tailwindcss only take effect in a specific container? #2581

www-YM · 2020-10-16T16:36:59Z

www-YM
Oct 16, 2020

Hello everyone,

I am currently using tailwindcss to develop a page component A, which needs to be compiled and embedded in other projects, and those projects has difference base styles .

I need the A components's base styles to be independent of other projects, so I import tailwindcss in the following way, but this way is invalid when using prefixes such as sm:, md:, etc.

How can I solve this problem?

style.pcss

[id=base-container] {
  @import "tailwindcss/base";

  @import "tailwindcss/components";

  @import "tailwindcss/utilities";
}

example:
When the browser screen width greater than 1024px, it still uses "tw-w-1/2".

<body>
  <div id="base-container">
    <div class="tw-w-1/2 lg:tw-w-1/6"></div>
  </div>
</body>

style outputs:

[id=base-container] .tw-w-1\/2 {
    width: 50%;
}

@media (min-width: 1024px)
<style>
.lg\:tw-w-1\/6 {
    width: 16.666667%;
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to make tailwindcss only take effect in a specific container? #2581

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How to make tailwindcss only take effect in a specific container? #2581

www-YM Oct 16, 2020

Replies: 0 comments

www-YM
Oct 16, 2020