Anyone able to successfully use Tailwind (DaisyUI) with CRXJS?

[Nithur-M]

I am trying to use Tailwind with crxjs but it breaks the styling of the web page. Is anyone able to do it successfully?
I am using React.
I'll appreciate some help. Thanks.

[crustycrabthe3rd]

Same here, not sure how i should go about this

[rileytaylor]

The easiest way to ensure you aren't breaking styles on a webpage is to use a Shadow DOM. The issue isn't due to tailwind, but if a site you are loading content scripts on also uses tailwind (or at least the same class names) it'll be a problem.

Your exact situation may vary, but this is what we use for loading our styles:

// ?inline is very important
import styles from './index.css?inline' assert { type: 'css' }
// `assert { type: 'css' }` may or may not be needed depending on your ecmascript/ts config

// Root element is in the normal page DOM
const rootElement = document.createElement('div')
document.body.appendChild(rootElement)

// Create a shadow DOM on the root element
const shadow = rootElement.attachShadow({ mode: 'open' })

// Create an element to place your content script html or your vue/react/svelte/pojo app
// and add it to the shadow DOM
const appElement = document.createElement('div')
shadow.appendChild(appElement)

// styles reset ensures your shadow dom inherits nothing from the parent DOM
const contentAppReset = document.createElement('style')
shadow.append(contentAppReset)
contentAppReset.textContent = `:host {all: initial;}`

// Put your css into the shadown dom
const contentScriptStyles = document.createElement('style')
shadow.append(contentScriptStyles)
contentScriptStyles.textContent = styles

There are several issues and other discussions about this as well, so take a look around if you need some advice for your particular stack.