Tailwind in content scripts doesn't work

[KULTI1995]

1. Does not generate tailwinds in content scripts. Styles don't load at all.
2. Manifest generation in build.ts does not work, how to solve:

  const fullPath = relative(
    extDir,
    resolve(pageDir, pageFile)
  )

  return fullPath.replace('\\', '/')

3. Tailwind on different pages will generate different problems when we don't use shadowDom. Therefore styles should be generated as a separate file. Like here:

import { createRoot } from 'react-dom/client';
import Main from './Main';

const container = document.createElement('div')
const rootEl = document.createElement('div')
const styleEl = document.createElement('link')
const shadowDOM = container.attachShadow?.({ mode: 'open' }) || container
styleEl.setAttribute('rel', 'stylesheet')
styleEl.setAttribute('href', chrome.runtime.getURL('contentStyle.css'))
shadowDOM.appendChild(styleEl)

shadowDOM.appendChild(rootEl)
document.body.appendChild(container)

const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<Main/>);

4. css modules in content scripts do not work.

[Debdut]

Thanks, for reporting, it's a problem in content script, we'll fix it in next iteration.

[chenyusheng]

I have encountered this problem, too. Is there a good solution?

[tluthra]

I'm running into the same issue, any help on getting Tailwind to work would be great