How to apply tailwind styles only in a certain element?

I'm writing a WordPress plugin using ReactPress as well as Tailwind and don't want the part of my application's CSS that is written in React to affect the styles of the Wordpress part.

However, since

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

is applied to the whole page, this screws up the rest of the page.

Is there any way to only make these styles apply inside a certain element, like this for example?

div#root {
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
}

There is no way to configure nesting or scoping tailwind styles to only a container with @tailwind base; @tailwind components; @tailwind utilities; directly.

Optimal Embedded / Nested Tailwind Configuration

You can alter the tailwind.config.js configuration and add a CSS Reset stylesheet to achieve an optimal "embedded" tailwind solution.

You can create a classic CSS Reset set of styles on a container where you want to cancel out the styles of the parent website or application. Where everything is prefixed with the container class you want to have styles reset on, so that the tailwind styles can be appropriately applied below this container.

Example CSS reset docs:

• https://meyerweb.com/eric/tools/css/reset/
• https://andy-bell.co.uk/a-modern-css-reset/

Example embed-reset.css

partial example

.react-style-reset html,
.react-style-reset body,
.react-style-reset div,
.react-style-reset span,
.react-style-reset applet,
.react-style-reset object,
.react-style-reset iframe,
.react-style-reset h1,
.react-style-reset h2,
.react-style-reset h3,
.react-style-reset h4,
.react-style-reset h5,
.react-style-reset h6,
.react-style-reset p,
.react-style-reset blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

Example tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
  prefix: "tw-",
  important: true,
};

Notice:

• Preflight is false - allows compatibility with other CSS in project - won't generate default baseline styles
• Prefix is enabled - avoid issues with existing css class names
• Important is enabled - override any css that exists in the parent site / app

Example main.tsx React App

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./embed-reset.css";
import "./index.css";

ReactDOM.createRoot(document.getElementById("react-embed-1")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Notice the embed-reset.css comes before the index.css.

Parent Website / Application

You will need a <div> with the id react-embed-1 and the class react-style-reset in your parent app for this example:

<div id="react-embed-1" class="react-style-reset"></div>

Your parent app can load your react app's generated .js bundle and .css file on the page with the above div for the react app to appear with proper tailwind styles.

For example, if you are using vite + tailwind to generate these files, the build output index.html would include example tags for the script and stylesheet.

    <script type="module" crossorigin src="/assets/index-7124ef29.js"></script>
    <link rel="stylesheet" href="/assets/index-8e021281.css">