tailwind no initial value in shadow root from content script

[mengxi-ream]

Describe the bug

Problem

I tried to add the utility .transform-x-full to a DOM element in content script but it does not work because className="transform-x-full" does not add the initial value normally, i.e. no following style in the css:

--tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

--tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

--tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0;
}

What should happen

If you have className="transform-x-full", you will get the above initial-values which are generated by tailwind. For example, you can try the following code in Tailwind Playground

<div class="fixed top-0 right-0 z-[9998] h-full translate-x-1/2 transform bg-white shadow-xl transition-transform duration-300">123</div>

You will see

What actually happened

But if you write something like the following in the index.tsx or App.tsx in content script, translate-x-full does not work because tw-translate-y is not defined (no initial-value)

      <div className="text-red-500 fixed top-0 right-0 z-[9998] h-full translate-x-full transform bg-zinc-700 shadow-xl transition-transform duration-300">
        123
      </div>

See the reproduction repo below for more detail

Popup works fine

Although transform-x-full does not work in content script but it works in popup. For example

<p className="read-the-docs translate-x-full">
        Click on the WXT and React logos to learn more
      </p>

Reproduction

https://github.com/mengxi-ream/tailwind-wxt-bug

Steps to reproduce

pnpm i and `pnpm dev

System Info

System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 172.53 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.7.0 - ~/.nvm/versions/node/v22.14.0/bin/pnpm
  Browsers:
    Chrome: 135.0.7049.96
    Safari: 18.2
  npmPackages:
    wxt: 0.20.0 => 0.20.0

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[mengxi-ream]

This appears to be relevant: tailwindlabs/tailwindcss#16772.

[mengxi-ream]

same as this issue? #1461

[aklinker1]

same as this issue? #1461

Yes, initial-value is a custom property.

[mengxi-ream]

same as this issue? #1461

Yes, initial-value is a custom property.

Thank you! I'm back to using Tailwind v3 now, and I hope we can transition to v4 in the future.

[aklinker1]

Hey @mengxi-ream wanna try out my fix? #1594

See the manual testing section

[mengxi-ream]

Hey @mengxi-ream wanna try out my fix? #1594

See the manual testing section

Hi @aklinker1 , I confirm this works in my side! really appreciate it!

wondering if the original host page using Tailwind v4 as well, will there be any potential conflict to inject the css into the original outside of shadow roots?

[aklinker1]

wondering if the original host page using Tailwind v4 as well, will there be any potential conflict to inject the css into the original outside of shadow roots?

Looks like tailwind at least scopes their custom properties with --tw- prefix. Other frameworks might not do that. But even so, these properties aren't likely to differ, so I didn't see a reason to worry about conflicts - if you declare the same thing twice, it works just fine.

If conflicts do become an issue, we can add a flag for this. maybe even add a manual scope or something to the properties. But not until it's needed, and I'm not convinced it is yet.