Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – 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;
}
Tags:

2

Answers


  1. 0

    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:

    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:

    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">
    Login or Signup to reply.
  2. 0

    Refer to this:

    https://www.npmjs.com/package/tailwindcss-scoped-preflight

    This lets you define isolationStrategy, where you can pace a single selector or an array of selectors(inside your tailwind.config.js):

      plugins: [
    scopedPreflightStyles({
      isolationStrategy: isolateInsideOfContainer([".tw-class", "#tw-id"]),
    }),
  ],

    This will apply it to all of the containers using the class tw-class, the id tw-id and its children.

    A really smooth solution!

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

Back To Top
Search