How to customize Shiki Syntax Highlighting in Astro using TailwindCSS V4

1-astro-config.md

Astro Config

export default defineConfig({
  markdown: {
    // "shiki" | "prism" | false
    syntaxHighlight: "shiki",
    shikiConfig: {
      // Need to use any existing theme here to be able to overwrite colors in CSS
      // Keep in mind that each of themes has different colors
      // List of bundled themes is available here:
      // https://shiki.style/themes#bundled-themes
      theme: "monokai",
    },
  },
});

2-css-file.md

Example of HTML generated by Astro. Styles in code are inline.

<pre class="astro-code monokai" style="background-color:#272822;color:#F8F8F2o">
  <code>
    <span class="line">
      <span style="color:#F92672">@plugin</span><span style="color:#F8F8F2"> "@tailwindcss";</span>
     </span>
  </code>
 </pre>

You need to overwrite color by using !important property.

Overwrite single color

.astro-code code .line [style*="color:#F8F8F2"] {
  @apply !text-primary;
}

Overwrite multiple colors at once

.astro-code code .line :is(
  [style*="color:#66D9EF"],
  [style*="color:#9ECBFF"],
  [style*="color:#F92672"]
  ) {
  @apply !text-primary;
}

Example of overwriting background color and text color

.astro-code {
  @apply !bg-[color:var(--color-primary)] !text-base-content/85;
}