Setup: web component with lit (3.3.2) based on flowbite (4.0.2) with tailwind (4.3.0)
In my web component i import css with ?inline.
@import 'tailwindcss';
@import 'flowbite/src/themes/default';
If i look the source code of this, i see some variables defined in the :host of the shadow dom from the web component. I see the --color-dark or --font-sans but not the --color-brand.
Because of this i can overwrite in document root of the outer the variable --color-brand in :root, but not --color-dark.
Workaround: I need to define my own variables and set them in the web component shadow dom like this
@theme {
--font-sans: var(--my-font-family);
--color-dark: var(--my-color-dark);
}
Why can i overwrite some variables in root and other not? Is this a bug or a feature?
Setup: web component with lit (3.3.2) based on flowbite (4.0.2) with tailwind (4.3.0)
In my web component i import css with ?inline.
If i look the source code of this, i see some variables defined in the :host of the shadow dom from the web component. I see the --color-dark or --font-sans but not the --color-brand.
Because of this i can overwrite in document root of the outer the variable --color-brand in :root, but not --color-dark.
Workaround: I need to define my own variables and set them in the web component shadow dom like this
Why can i overwrite some variables in root and other not? Is this a bug or a feature?