Override external css class added by external script in Astro and Tailwind

Question

From an Astro component an external script is added which create some HTML dom elements (and its styling).

// MyComponent.astro
<script is:inline src={import.meta.env.PUBLIC_MY_SCRIPT}></script>

In the dom it renders like:

<div class"my-ui-uicontainer">
// More code..
</div>

I need to override the applied styling of .my-ui-uicontainer.

I tried the following but none of them work:

// main.css

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

And I tried, just adding the selector:

  // main.css

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

Or with the Tailwind theme() function:

// main.css

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

Also I tried the same in the Astro component (in the style tag):

// MyComponent.astro

<style>
.my-ui-uicontainer {
    @apply !bg-blue-500;
  }
</style

Or the theme() function:

// MyComponent.astro

<style>
  .my-ui-uicontainer {
    background-color: theme(colors.blue.500) !important;
  }
</style

Non of them works?

What is the best way to do this with Astro and Tailwind css?

redoc · Accepted Answer · 2024-10-16 16:18:22Z

-1

There ofcourse exist use of !important like this: class="!bg-red-500 !text-white !p-4" (inline) or

.my-ui-uicontainer {
    @apply !bg-red-500 !text-white !p-4;
}

but you would wish to avoid those typing of ! all time, which you can do by use :global() modifier as shown:

:global(.my-ui-uicontainer) {
    @apply bg-red-500 text-white p-4;
}

which i conclude to be best method to override

answered Oct 16, 2024 at 16:18

redoc

3,2661 gold badge12 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

meez Over a year ago

none of that works?? I tried that. See my updated question.

redoc Over a year ago

From details provided i cant help by just listing out methods to solve, please provide a minimum reproducible example for further help(make a short project with necessary code to produce this problem, so that cause can be debugged). As for now, make sure you're loading the overriding style after the dom element is created,and default style is applied, also you may try using normal css to override like: <style>.my-ui-uicontainer {background-color: #3b82f6 !important;}</style>

meez Over a year ago

Yes that's what I did, I used hard coded values. But I like to use dynamic values

redoc Over a year ago

make sure you're loading the overriding style after the dom element is created and as i said i can just list what to check

Collectives™ on Stack Overflow

Override external css class added by external script in Astro and Tailwind

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related