How to use Tailwind with shadow dom?

[jenstornell]

This question is not only related to Tailwind, but to other similar frameworks/libraries.

I just created my first HTML web component. I create a template and inside that I added Tailwind classes. The component is by design isolated from the rest, which often is a good thing. However, in my case I want it to inherit the CSS because of Tailwind.

It probably does not matter, but I use it with NodeJS and Electron.

Any ideas how to get around it?

const template = document.createElement("template");
template.innerHTML = /*html */ `
  <button class="p-4 bg-red-700">Button</button>
`;

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define("my-component", MyComponent);

module.exports = MyComponent;

[jenstornell]

An old article but other articles point in this direction as well.

https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/

Because the problem with trying to provide shared styles to web components stems from using the shadow DOM, one way to avoid the problem entirely is to not use the shadow DOM.

[codeyourwayup]

Are you using something like this? when you say duplicate styles?

<style> @import "styleguide.css" </style>

[teffcode]

It’s an anti-pattern and a performance problem !

[alexbjorlig]

Hi @jenstornell - I'm actually facing the exact same issue. So your final solution was to "give up" on the usage af shadow DOM?

[jenstornell]

Yes, I skip the Shadow DOM when I want to use Tailwind OR I duplicate the styles from Tailwind inside the Shadow DOM.

It's not optimal but I did not find a better way.

[JensBond]

HI,

any news here? I want to ad the tailwind to my custom components shadow. When i don't use the shadow I can not use the slots function. So I need it. Nope. Import in sytel is no option

[EricRohlfs]

Just build your own slot functionality. Its not that hard. It is just queryselector matching

[codeyourwayup]

This is how I fixed the problem.

1. use the https://github.com/Wildhoney/ReactShadow package to create a react shadow element, or you can create the shadow root by your own
2. then import tailwindcss as string and inject into the page, like this:

import React from 'react';
import Widget from '../../components/Widget';
import styles from './styles.css';

export default function Layout(props) {
    return (
        <section className="container">
            <style type="text/css">{styles.toString()}</style>
            <Widget {...props} />
        </section>
    );
}

[kiranmarshall]

Anyone who has come here looking to do this - if you're using vite you can import the css directly as a string like so: import style from "./index.css?inline".

Working fine in dev and production, and a tidy wee fix! Thanks @JaapWeijland

[evbo]

@kiranmarshall please consider the security risks of allowing inline styles before committing to this approach in a production system:

Disallowing inline styles and inline scripts is one of the biggest security wins CSP provides. However, if you absolutely have to use it, there are a few mechanisms that will allow them.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src

[kiranmarshall]

@evbo given that this step is specifically for a web component which is to be published via npm, and therefore this step is carried out exclusively at build time, do I need to worry about this?

[evbo]

@kiranmarshall have you reviewed the generated html for inline attributes in any of your html tags?

[kiranmarshall]

@evbo are you talking about sanitizing/checking the input?

If yes, then currently no, but this is a concern I have got noted and will look at implementing when production builds are more of a pressing issue.
If no, then can you please direct me to some resources where I can learn about what you mean?

[onmax]

I want to share my workaround with all of you. Apart from Tailwind, I am using Swiper inside my component (which I am also importing with @import, I know, it's an antipattern, I have to solve that).

Anyway, I'm creating the component with Angular v12. and I ended up doing:

1. Run ng build of the component I am building
2. Copy the CSS generated
3. Paste the CSS in the styles of the component I am exporting
4. Run ng build again
5. Copy just the .js file and publish that file
6. In the host of the WebComponent, just import the .js file, and the style will be imported in the shadow dom and not the webpage dom.

I don't like all these steps, but you know what they say, if it works for now...

I am thinking about automating this process somehow. For example, a CLI tool that generates a CSS file from HTML files with a bunch of @apply, so then it generates the file?? I am just thinking aloud, probably, there are better ways to solve this until a native solution is available. Any ideas out there?

[JaapWeijland]

Thanks for your suggestion, however, I think manually copy and paste styles won't be a viable option for many of us, as you'll not be able to do that in a CI/CD environment.

[jbruni]

My solution was to use Twind at development and build time.

The requirement is to have the HTML of the component available as a string.

You can do this:

import { create } from 'twind'
import { shim, virtualSheet, getStyleTag } from 'twind/shim/server'

const sheet = virtualSheet()
const { tw } = create({ sheet, preflight: false })

function getTailwindStyles(html) {
  sheet.reset()
  shim(html, { tw })
  return getStyleTag(sheet)
}

It will read the classes within your HTML, and generate a <style> tag for the Tailwind classes on it.

• Read more at https://twind.dev/api/modules/twind_shim_server.html

---

That was the core idea. I am using Vite, and I have my components' templates in .html files.

I actually created a Vite plugin, and when importing the .html templates for usage, I append ?shadow to trigger the plugin, like this:

import template from './my-web-component.html?shadow'

This is the full plugin code:

/*
 * Prepend style tag with Tailwind styles into HTML templates
 *
 * https://twind.dev/api/modules/twind_shim_server.html
 */

import { create } from 'twind'
import { shim, virtualSheet, getStyleTag } from 'twind/shim/server'

const sheet = virtualSheet()
const { tw } = create({ sheet, preflight: false })

const fileRegex = /\.html\?shadow$/

export default function twindPlugin() {
  return {
    name: 'twind-plugin',

    transform(src, id) {
      if (fileRegex.test(id)) {

        sheet.reset()
        const template = shim(src, { tw })
        const styles = getStyleTag(sheet)

        return {
          code: `export default ${JSON.stringify(styles + template)}`,
          map: { mappings: '' },
        }
      }
    },
  }
}

To use it, just add the plugin in Vite configuration:

import twindPlugin from './vite-twind-plugin'

export default {
  plugins: [
    twindPlugin(),
  ],
}

[carloslfu]

There is a new way here: https://twind.style/with-web-components

[lancelotj]

Current Chrome and Firefox have already supported linking a stylesheet in the shadow DOM. See example: https://jsfiddle.net/straker/vj6vc7pn/

[cyfung1031]

Use the css selector ::part which is natively supported in all modern browsers.
@apply refers to https://tailwindcss.com/docs/extracting-components

const template = document.createElement("template");
template.innerHTML = /*html */ `
  <button part="mybutton">Button</button>
`;

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define("my-component", MyComponent);

const style = document.createElement('style');
style.textContent = `
my-component::part(mybutton) {
  @apply p-4 bg-red-700;
}
`;
document.documentElement.appendChild(style);

module.exports = MyComponent;

[jshimkoski]

I've been thinking about this issue and I believe a not so perfect but feasible solution could be the creation of a new tailwindcss plugin for ::part().

Basically, every class generated by tailwindcss could have a coresponding ::part() class definition.

For example:

.bg-red-900,
::part(bg-red-900) { ... }

We'd also need a basic preflight reset that can be applied as well, since the shadow dom won't allow for the global styling preflight reset. That could be another ::part() class definition.

For this example that reset will be called tw:

::part(tw) { ... }

With all that, from within the shadow dom you could just use the parts you want for each element.

<div part="tw bg-red-900">...

This has some awesome perks that I think would outweigh its hacky nature (the shadow dom is a jerk anyway, so... there we are) 😀

I'll see if I can throw together a working plugin this weekend for everyone.

[jshimkoski]

Started looking into this idea, and, as of right now, creating non-class based selectors based on a tailwind config is a major PITA.

Using addVariant(), I am able to generate the necessary ::part() classes, e.g., ::part(bg-red-900), however, injecting that back into the CSS has proven difficult.

I’ll keep working on this as it would be a pretty powerful plugin that could open up a world of possibilities in terms of theming the shadow dom.

Will keep you posted.

[jshimkoski]

I did a little more playing tonight and I don't think this option is feasible at this point in time. There are a couple of issues:

1. Purging the ::part() CSS isn't possible at the current time. Tailwind CSS would need a more sophisticated purging engine that could identify part="" attributes and know that it should keep around the coorresponding ::part() classes.
2. I don't know if you can dig into the available Tailwind CSS utilities via a plugin and generate non-class based CSS.

As @cyfung1031 said, I think using @apply inside a ::part() declaration is probably the way to go for now. It seems to be the cleanest way at the current moment. That said, I think the following plugin could prove useful:

const plugin = require("tailwindcss/plugin");

module.exports = plugin(function({ addBase }) {
  addBase({
    '::part(tw)': {
      boxSizing: 'border-box',
      borderWidth: '0',
      borderStyle: 'solid',
      borderColor: 'transparent',
      fontSize: 'inherit',
      fontWeight: 'inherit',
      color: 'inherit',
      verticalAlign: 'baseline',
      margin: '0',
      padding: '0',
      background: '0'
    }
  })
})

That plugin will apply a base "preflight" reset to elements in the shadow dom when they use part="tw".

I do wish there was an automated approach for all of this.

[mgibas]

I believe that with TW3 (since its JIT) only missing part is being able to generate part: variant the way it generates content-[Hello] classes. Once that's possible, we should be able to do this:

<my-component class="part-[header]:text-blue-50 part-[footer]:text-pink-50" />

[saadeghi]

@mgibas Hey, could you find a way to add a plugin to generate something like part-[header]:text-blue-50 using JIT?

[eswat2]

i'd like to share an approach i've been using when building Web Components with StencilJS.

CAVEAT: most of my projects only have a single top-level component that's built from nested functional components.

Within the Stencil component definition, you can specify a styleUrl. This file provides styling specific to that component (inside the shadowDOM). For example:

@Component({
  tag: 'proto-tinker',
  styleUrl: './proto-tinker.css',
  shadow: true,
})
export class ProtoTinker {
  ...
}

I'm using the Tailwind CLI to generate the styleUrl file by collecting all of the Tailwind class names referenced in this component and it's supporting functional components. The real workhorse behind this is a simple .generate script:

#!/bin/bash
COMPONENT=proto-tinker
DIR=./src/components/$COMPONENT
INPUT=./src/styles/app.pcss
OUTPUT=$DIR/$COMPONENT.css

if [ -f $INPUT ]
then
  if [ -d $DIR ]
  then
    echo '--' $COMPONENT
    npx tailwindcss -i $INPUT -o $OUTPUT $1
  fi
fi

The INPUT file passed to the CLI defines the Tailwind references and any standard CSS that's needed for the project:

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

@layer components {
  .ds1-main {
    @apply flex flex-col p-4 text-clrs-navy font-sans antialiased;
  }
  .ds1-button {
    @apply border-solid border-clrs-slate flex items-center text-clrs-white active:text-clrs-navy active:bg-clrs-gray;
  }
}

.data-button {
  border-radius: 5px;
  border-width: 1px;
  padding: 5px;
  margin: 0px;
  margin-right: 5px;
  cursor: pointer;
}

You can see how this all fits together in this sample repo:

https://github.com/eswat2/proto-tinker-wc

I've used this same approach to build all of my Stencil+Tailwind projects:

https://wc-tinker.vercel.app
https://wc-funnel.vercel.app
https://wc-autos.vercel.app
https://wc-sudoku.vercel.app

Again, this approach may not be useful in all cases, but i've found it to be a very useful pattern for my projects...

[HubnesterRising]

Another approach for usage with lit & vite, and css file with tailwind

@tailwind base;

:host {
  display: block;
}

h1 {
  color: blue;

  & p {
    color: green;
  }
}

  import componentStyles from './my-element.css'
  // within your element ...
  static styles = [
    css`${unsafeCSS(componentStyles)}`
  ]

Although the styles are generated correctly, the HMR for lit and vite isn't quite there yet.
Page reload shows the correct styles.

Also can be used without wrapping it in css and unsafeCSS by using rollup-plugin-postcss-lit

  import componentStyles from './my-element.css'
  // within your element ...
  static styles = [componentStyles]
  // or
  static styles = componentStyles

[ciriousjoker]

• @import url() the tailwind.css file into each shadow dom
• @import url() doesn't work in Angular though, Angular compiles it away and embeds the stylesheets

Solution:

• Create directive
• Directive appends a css import statement into the element it's attached to

directive.ts

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appShadowDomTailwind]'
})
export class ShadowDomTailwindDirective {
  constructor(el: ElementRef<HTMLElement>) {
    // Important to avoid FOUC
    el.nativeElement.hidden = true;

    const div = document.createElement('link');
    div.rel = "stylesheet";
    div.href = environment.production ? "https://dieringe-web-components.web.app/tailwind.css" : "tailwind.css";
    div.onload = () => {
      el.nativeElement.hidden = false;
    }
    el.nativeElement.appendChild(div);
  }
}

angular.json

"styles": [
  "src/styles.scss",
  {
    "input": "src/tailwind.css",
    "bundleName": "tailwind"
  }
],

Usage

<!-- Put this anywhere in the shadow dom component -->
<div appShadowDomTailwind></div>

Theoretically, this has no performance/bundle size impact and it seems to work, even though it's ugly af...

[Buroni]

It may be better to just put a link tag in the shadow DOM template rather than use @import url, i.e. <link rel="stylesheet" href="/tailwind.css">. The performance hit in your solution is that @import loads CSS sequentially, whereas links are loaded in parallel.

[ciriousjoker]

Thanks for the suggestion, I've updated the code.

[esphoenixc]

May I ask what's inside tailwind.css file? Can I assume that it's the same file that has these lines of code?

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

[ciriousjoker]

Iirc, yes

[Buroni]

I think constructible stylesheets will be the answer to this if they are eventually widely adopted by browsers (and frameworks).

In the meantime, adding a link tag to the component body is a good workaround but also not ideal -- while repeated instances of the stylesheet are cached, there's still a performance impact as the whole tailwind stylesheet will be re-parsed by each component instance. I imagine this impact would be non-negligible if you have a large amount of web components on the page and a big tailwind css file.

Alternatively, if anyone is using Vue 3 web components with vite or rollup, I've written a plugin that uses twind to extract only the tailwind styles used by the component and inject them into the component's shadow DOM. Still not ideal as style rules are repeated across component instances, but it's another alternative with a likely speed advantage over the previous solution.

[running-grass]

It is implemented by using the unsafe and adoptstyles of lit, based on the constructive stylesheet.

Look here
https://github.com/running-grass/starter-lit-with-tailwind

[Buroni]

That's great! Hopefully we'll get something similar in Vue 3 soon too

[running-grass]

It is implemented by using the unsafe and adoptstyles of lit, based on the constructive stylesheet.

Look here
https://github.com/running-grass/starter-lit-with-tailwind

[GorvGoyl]

I was able to add Tailwind styles in shadow dom using Twind and wrote a small guide: https://gourav.io/blog/tailwind-in-shadow-dom

[esphoenixc]

I'm sadden.. I was really having a difficult time in injecting tailwindCSS into shadow dom. I've managed to do it by injecting a link tag that has href to the built index.css file which has @tailwind components and so on.. but it seems not working fully.. so I thought this twind library came here to rescue me :(
btw I followed the guide and twind library successfully detects tailwindCSS classes inside shadow dom. It sadly can't detect daisyUI components I've used like buttons and dropdown menus.

[endepointe]

You could create a link element and attach it to the shadowDOM. The link.href would be the path to your tailwind stylesheet.

Here is a working example of a custom navigation component using tailwindcss:

[esphoenixc]

Custom animations that are defined inside tailwind.config.cjs are not working inside shadow dom.. How do I fix this??

[endepointe]

without seeing how you are using it, with code examples, it is difficult to answer.

[esphoenixc]

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./src/content-scripts/**.js",
  ],
  theme: {
    extend: {
      keyframes: {
        fadeout: {
          "0%": { opacity: "1" },
          "100%": { opacity: "0" },
        },

        wave: {
          "0%": {
            transform: "rotate(0.0deg)",
          },
          "10%": {
            transform: "rotate(14.0deg)",
          },
          "20%": {
            transform: "rotate(-8.0deg)",
          },
          "30%": {
            transform: "rotate(14.0deg)",
          },
          "40%": {
            transform: "rotate(-4.0deg)",
          },
          "50%": {
            transform: "rotate(10.0deg)",
          },
          "60%": {
            transform: "rotate(0.0deg)",
          },
          "100%": {
            transform: "rotate(0.0deg)",
          },
        },
      },

      animation: {
        fadeoutvideo: "fadeout 1s ease-in-out infinite",
        wavehand: "wave 2.5s ease-in-out infinite",
      },


    },
  },
  plugins: [require("daisyui")],
};

I wrote these lines of code inside tailwind.config.cjs

However, these custom animations I've written are not being loaded inside shadow dom. I have mounted a vue component inside shadow dom and when I put animate-fadeoutvideo or animate-wavehand. The effect is not shown. Also, when I insepct, there's no keyframes or animation property there either. So I thought it must have do with build issue of tailwindCSS.

Do you have any ideas as to how to solve this issue?

[aluxian]

Somehow the new version of twind (https://twind.style) is hard to find on Google, but in their docs I found a pretty good solution:

https://twind.style/with-lit

https://twind.style/with-web-components

import install from '@twind/with-web-components'
import config from './twind.config'

const withTwind = install(config)

class TwindElement extends withTwind(HTMLElement) {
  constructor() {
    super()

    const shadow = this.attachShadow({ mode: 'open' })

    shadow.innerHTML = `<h1 class="text-3xl font-bold underline">Hello world!</h1>`
  }
}

customElements.define('twind-element', TwindElement)

[rolznz]

I had to also add @twind/preset-autoprefix which in the docs is optional, for styles like bg-red-500

[carloslfu]

This is the way.

[rvanbaalen]

Just dropping my two cents here. This seems to work in my use case:

const template = document.createElement('template');
template.innerHTML = `
    <h3 class="text-violet-800 text-3xl">
        <slot></slot>
    </h3>
`;

class ProjectList extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({mode: 'open'});
        shadow.append(template.content.cloneNode(true));

        const style = shadow.host.closest('html').querySelector('link[data-app-style]');
        shadow.append(style.cloneNode(true));
    }
}

customElements.define('project-list', ProjectList);

In the parent document, I have this stylesheet:

<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-app-style />

I'm using Laravel with Mix at the moment and this ensures I will always get the correct app.css stylesheet filename, even when it's hashed in production.

I get the element, copy it, and insert it into the ShadowDOM.

For bonus point I could dedicate a components.css stylesheet only for injection into webcomponents I use but at the moment, this seems to work.

Does anyone have arguments on why I shouldn't use this method?

I'm not building any component library that should be used across applications (for now 😉), it's just a workaround to get TailwindCSS styles into my web application's webcomponents.

[virtualitems]

[simpleshadow]

I believe this solution is importing your CSS into the parent document and not isolating the styles to the shadow DOM, so not ideal.

[abhishekpurecode]

Using Tailwind CSS with Shadow DOM involves some considerations. First, ensure that your Shadow DOM is encapsulated within the desired component. To apply Tailwind styles, include the required utility classes within the component's style tag. However, keep in mind that some dynamic features of Tailwind may not work seamlessly within Shadow DOM due to encapsulation. To address this, you can manually extract and include relevant styles from Tailwind's output in your Shadow DOM. This allows you to leverage Tailwind's utility classes while respecting the encapsulation provided by Shadow DOM, providing a balance between utility and encapsulation.

To know more, read here

[ahdyt]

So, tailwind can't support shadow DOM out of the box?

[OlcayGoeren]

Does somebody have a working example of vite+react? Can't manage to get it work.

[ahdyt]

React AFAIK use real DOM so it's no problem and have no relation to this issue, npm create vite, then read tailwind docs should suffice your need.

[ezzabuzaid]

For Vue using Vite

index.ts

import install from '@twind/with-web-components';
import { defineCustomElement } from 'vue';

import MyComponent from './my.ce.vue';
import config from './twind.config';

const withTwind = install(config);
customElements.define(
  'your-component',
  withTwind(defineCustomElement(MyComponent)),
);

twind.config.js

import { defineConfig } from '@twind/core';
import presetAutoprefix from '@twind/preset-autoprefix';
import presetTailwind from '@twind/preset-tailwind';

export default defineConfig({
  presets: [presetAutoprefix(), presetTailwind()],
  hash: false,
});

[rezasohrabi]

The simplest solution is to define an element as the root inside the shadow DOM with an ID, and then prepend this ID before each Tailwind class. You can achieve this using the postcss-prefix-selector package.
Additionally, for more details on implementing this solution, you can visit the postcss configuration in the chrome-ext-starter repo.
In this repo, not only Tailwind but also DaisyUI is used in the shadow dom. If you're looking to dive into Chrome extension development with Vite, React, Tailwind, and DaisyUI, this repository is the ideal starting point for your project.

[scarletczen]

Thanks @rezasohrabi, your approach helped me out.

[farzadmf]

@rezasohrabi thank you so much for the repo; got a lot of ideas from it. I opened an issue to ask a question; I'd appreciate your response in there.

[ARajgor]

Hello everyone, I'm building browser extension with this setup. I'm using webpack and webpack-server to build a extension.
converting rem-to-px solution works for me,

package.json

  "dependencies": {
    "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
    "css-loader": "^7.1.2",
    "postcss-loader": "^8.1.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.2",
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "autoprefixer": "^10.4.19",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^12.0.2",
    "fs-extra": "^11.2.0",
    "html-webpack-plugin": "^5.6.0",
    "mini-css-extract-plugin": "^2.9.0",
    "postcss": "^8.4.38",
    "source-map-loader": "^5.0.0",
    "tailwindcss": "^3.4.3",
    "vite": "^5.2.8",
    "vue-loader": "^17.4.2",
    "webpack": "^5.91.0",
    "webpack-dev-server": "^5.0.4"
  }

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('@thedutchcoder/postcss-rem-to-px'),
    require('autoprefixer')

  ],
};

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['Source Code Pro', 'monospace'],
      },
    },
  },
  plugins: [],
}

App.vue (content script)

    <div
      class="text-white fixed bottom-0 right-0 bg-zinc-800 h-[500px] m-6 p-4 rounded-2xl w-[350px] drop-shadow-xl"
      style="z-index: 999999999999"
    >
    .
    .

index.js (content.js)

    // Create a shadow root
    const host = document.createElement("div");
    host.id = "main-palette";
    const shadow = host.attachShadow({ mode: "open" });
    
    // Create a root element inside the shadow root
    const appRoot = document.createElement('div');
    appRoot.setAttribute('id', 'app');
    
    createApp(App)
    .mount(appRoot);
    
    // Setup the style
    host.style.all = "initial";  // Reset all inherited styles

    // Fetch and apply Tailwind CSS
    const response = await fetch(browser.runtime.getURL('/contentScript.css')); // your CSS 
    const mainCSS = await response.text();

    const sheet = new CSSStyleSheet();
    sheet.replaceSync(mainCSS);

    shadow.adoptedStyleSheets = [sheet];
    shadow.appendChild(appRoot);

    document.body.appendChild(host);

[igorlanko]

Can I ask you, is the reason to use the @thedutchcoder/postcss-rem-to-px is preventing font-size: 62.5% from bleeding into the extension styles? I've been trying to find a solution to this, tried many times all the style resets & isolation, but it always bleeds in, even when it's crossed out in DevTools:

[irina-baeva]

@igorlanko did you manage to find a solution for font-size: 62.5% bleeding into the extension/shadow dom styles by any chance?

[igorlanko]

@irina-baeva, hey sorry I couldn't actually find what I did back then lol. It looks like the postcss-rem-to-px was added to the tailwind config file, and I also included text-base under the main container of my extension overlay, that way it forces the base size to be 16px of all the text as a starting point. Seemed to do the trick somehow 🤷 Sorry if this is not helpful much.

[irina-baeva]

@igorlanko thank you for your answer!

[tryoxiss]

Far from a perfect solution but I think with some tinkering you could solve this with adopted stylesheets.

[rafal-zelek]

Thanks! I used it with combination of cssInjectedByJsPlugin and injectCodeFunction with enableDev: process.env['SERVE'] === 'true'
Even hot reload works fine.
I don't have time right now to write more details and code here, but it is possible to use CLOSED shadow dom with tailwind that way.

  plugins: [
    cssInjectedByJsPlugin({
      dev: {
        enableDev: process.env['SERVE'] === 'true'
      },
      injectCodeFunction: (cssCode: string, options) => {
        console.log(cssCode.substring(0, 50));
        const styleId = options.attributes && options.attributes['data-vite-dev-id'] || btoa(cssCode);
        console.log(styleId);
        if (!window.__styles) {
          window.__styles = {};
        }
        if (!window.__styles[styleId]) {
          window.__styles[styleId] = new CSSStyleSheet();
        }
        window.__styles[styleId].replaceSync(cssCode);
        window.dispatchEvent(new CustomEvent('vite:css-injected-by-js'));
      }
    })
  ],

import r2wc from '@r2wc/react-to-web-component';

export const r2wcStyled = <Props extends object>(
  Component: Parameters<typeof r2wc<Props>>[0],
  options?: Parameters<typeof r2wc<Props>>[1]
) => {
  const WebComponent = r2wc<Props>(Component, { shadow: 'closed', ...options });

  class WebComponentWithStyle extends WebComponent {
    connectedCallback() {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      super.connectedCallback();
      // @ts-ignore
      const shadowRoot = this.container as ShadowRoot;
      document.adoptedStyleSheets = Object.values(window.__styles || {});
      shadowRoot.adoptedStyleSheets = Object.values(window.__styles || {});
      console.log('initial styles', shadowRoot.adoptedStyleSheets);
      window.addEventListener('vite:css-injected-by-js', () => {
        document.adoptedStyleSheets = Object.values(window.__styles || {});
        shadowRoot.adoptedStyleSheets = Object.values(window.__styles || {});
        console.log('updated styles', shadowRoot.adoptedStyleSheets);
      });
    }
  }

  return WebComponentWithStyle;
};

and then I can use them as

export const defineHomePage = () => {
  customElements.define(
    'home-page',
    r2wcStyled(HomePage)
  );
};

Idk if thats 100% working as I just glued it together, but its a good starting point.

[ngryman]

For anyone interested it works using with Vite, ?inline and adopted stylesheets:

import { render } from 'solid-js/web'
import styles from './app.css?inline'
import { App } from './app'

const host = document.createElement('my-app')
const shadow = host.attachShadow({ mode: 'open' })

const sheet = new CSSStyleSheet()
sheet.replaceSync(styles)
shadow.adoptedStyleSheets = [sheet]

document.body.appendChild(host)

render(() => <App />, shadow)

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

/** ... */

Note: if you're using shadcn or defining styles in the root element, don't forget to add :host:

- :root {
+ :root,
+ :host {
/** ... */
}

[rxliuli]

I suggest modifying the styles directly during the injection, as follows

import { render } from 'solid-js/web'
import styles from './app.css?inline'
import { App } from './app'

const host = document.createElement('my-app')
const shadow = host.attachShadow({ mode: 'open' })

const sheet = new CSSStyleSheet()
- sheet.replaceSync(styles)
+ sheet.replaceSync(styles.replaceAll(':root', ':host'))
shadow.adoptedStyleSheets = [sheet]

document.body.appendChild(host)

render(() => <App />, shadow)

Since most frameworks do not properly handle dark mode support for shadow DOM, it is also necessary to manually modify the class of the shadow DOM root when the theme changes. Fortunately, it only takes a few lines of code

createEffect(() => {
    const current = mode()
    if (shadow.querySelector('body')) {
      root.className = `color-scheme: ${current}`
    }
})

[xbzhang2020]

It's easy to implement in Vite, because it supports importing CSS as a string (by ?inline query suffix) or a URL (by ?url query suffix).

Example:

style.css

@import "tailwindcss";

main.js

import styleText from "./style.css?inline";
// import styleUrl from "./style.css?url";

const host = document.getElementById("root");

if (host) {
  const shadow = host.attachShadow({ mode: "open" });

  const root = document.createElement("div");
  root.innerHTML = `
    <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
  `;
  shadow.appendChild(root);

  // Method1: import CSS as a string
  const style = document.createElement("style");
  style.textContent = styleText;
  shadow.appendChild(style);

  // Method2: import CSS as a URL
  // const link = document.createElement("link");
  // link.rel = "stylesheet";
  // link.href = styleUrl;
  // shadow.appendChild(link);
}

[MihirMalaviya]

IAHDGWFYTKUGYWDYTGUGAUDGYUVAGIWUDVYAGUY!!!!

I HAD WENT THROUGH EVERY SOLUTION UNTIL I GOT DOWN TO YOURS

THEN I TRIED YOURS AND IT WORKD

AND I SAW A RED BORDER AROUND MY ELEMENT IN MY CHROME EXTENSION

FINALLY IT WORKS :-)

AYGTDWUOY*GD YAYAYAY!!

[MihirMalaviya]

I have a problem: it doesnt handle dark mode anymore, like it just dark mode always, whereas before it would switch with the browser

[rxliuli]

You have to handle it manually, but it only takes a few lines of code

https://github.com/rxliuli/mass-block-twitter/blob/4db40132bff2447c9fd58c24c22292270ab69e3b/packages/plugin/src/entrypoints/content/app.svelte#L70-L80

[MihirMalaviya]

hmmmm im super dumb can u explain what that is doing? Idk how to make it into tsx
<3

[rxliuli]

Basically, you need to listen for theme changes and manually update the class of the shadow dom body, because by default, theme changes only modify the class of document.body.

[robustadev]

If you want to use tailwind v4, checkout my comment here:
#16772 (comment)

[kcrwfrd]

For anyone using Webpack, you can configure css-loader to import styles as a CSSStyleSheet and use that very cleanly with adoptedStyleSheets

import styles from './styles.css' with { type: 'css' }

shadowRoot.adoptedStyleSheets = [styles]

This is very clean and performant, and dare I say perhaps even ideal. CSS Module Imports are a native ESM feature so you can even do this without any build system at all in supporting browsers. Bleeding edge stuff.

Looks like Vite is lagging behind in supporting imports like this: vitejs/vite#17700

Reading material:

• https://web.dev/articles/constructable-stylesheets
• https://dandclark.github.io/json-css-module-notes/#css-module-performancememory-examples
• https://wicg.github.io/webcomponents/proposals/css-modules-v1-explainer
• https://web.dev/articles/css-module-scripts
• https://css-tricks.com/css-modules-the-native-ones/
• https://v8.dev/features/import-attributes
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with
• https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets