Create a barrier to CSS inheritance with Tailwind? - Stack Overflow

admin管理员组

文章数量:1128329

I am developing an interactive data visualization library and CSS inheritance has been causing me some pain. Specifically, I'd like my interactive graphs to be embedable inside HTML documents (such as bookdown) without inheriting the parent element's styles, since this can mess up my layout. I'm using Tailwind utility classes and have had issues where the parent component's styles would override my graphs' styles because they had higher specificity.

Is there a way to create barrier between the styles of the parent component and my components, such that my components would not inherit any of the parent's styles? Particularly one that would work with Tailwind utility classes? Suppose I have the following HTML:

    <div id="parent-component">
      <div id="my-root-component">
        <div id="my-child-component1"></div>
        <div id="my-child-component2"></div>
        ...
      </div>
    </div>

I don't want anything bellow my-root-component to inherit the parent-component's (and it's ancestors') styles. As per similar post and this article, I've tried the following:

.my-root-component {
   all: revert;

   * {
      all: revert;
   }
}

This seems to partially work, however, it overrides the Tailwind utility classes of the child components too. Any idea how to create a barrier to inheritance while also retaining the ability to add Tailwind classes?

本文标签： Create a barrier to CSS inheritance with TailwindStack Overflow