Переопределить внешний класс CSS, добавленный внешним скриптом в Astro и Tailwind ⇐ CSS

[Anonymous]

Я использую Astro и Tailwind CSS.
Из компонента Astro добавляется внешний скрипт, который создает некоторые HTML-элементы dom (и их стили).

Код: Выделить всё

// MyComponent.astro

В dom это отображается так:

Код: Выделить всё

// More code..

Мне нужно переопределить примененный стиль .my-ui-uicontainer.
Я попробовал следующее, но ни один из них не работает :

Код: Выделить всё

// main.css

@layer base {
.my-ui-uicontainer {
@apply !bg-blue-500;
}
}

И я попробовал, просто добавив селектор:

Код: Выделить всё

  // main.css

.my-ui-uicontainer {
@apply !bg-blue-500;
}

Или с помощью функции Tailwind theme():

Код: Выделить всё

// main.css

@layer base {
.my-ui-uicontainer {
background-color: theme(colors.blue.500) !important;
}
}

Также я попробовал то же самое в компоненте Astro (в теге стиля):

Код: Выделить всё

// MyComponent.astro


.my-ui-uicontainer {
@apply !bg-blue-500;
}


Подробнее здесь: [url]https://stackoverflow.com/questions/79093355/override-external-css-class-added-by-external-script-in-astro-and-tailwind[/url]