Question 73690 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React component that don't use Tailwind global CSS – Reactjs

I have a Next.js app that uses Tailwind. I want to load a third party document viewer that has it’s own styles and there’s a clash between this viewer and Tailwind styles.

Is there a way to avoid the naming clash?

One way is using iframes, but I would like to avoid it.
I know that I could prefix the Tailwind classes, but I would need to rename all classes in all files right? If this is the case, then it’s not an option.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution I used was to load the document viewer into an Iframe, this way there was no clash of styles classes.


  2. 0

    You can use this TailwindCSS plugin called arthurdenner/tailwindcss-all.

    • Start by installing it as a dev dependency.
    npm i -D tailwindcss-all
    • Next, register the plugin in your tailwind.config.js.
    module.exports = {
  // ...
  plugins: [
    // ...
    require('tailwindcss-all'),
  ],
};
    • Wrap your document-viewer (or content for that matter) with a div with class of all-initial.
    <section class="bg-blue-100">
  <div class="container mx-auto min-h-screen px-5 py-20">
    <h1 class="text-2xl font-bold">The div below will not use TailwindCSS reset due to use of <span class="whitespace-nowrap rounded-md bg-blue-300 px-2 py-1 text-xl">all-initial</span> class.</h1>
    <main class="all-initial">
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In ullam ea ab non magni placeat exercitationem doloremque nulla architecto ratione. Obcaecati eveniet dolores reprehenderit reiciendis unde, eius eligendi debitis cupiditate.</p>
    </main>
  </div>
</section>

    Refer here for a quick preview.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search