How to style tippy.js with tailwind css?

I am using tippy.js with alpine js and can't figure out how I can edit the style of it.

I saw this thread tippy.js tooltips not responding to css styling but doesn't seem to work when I try the solution in app.css for laravel project

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://unpkg.com/tippy.js@6/dist/tippy.css');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer components {

    /* Customizing Tooltip Design */
    .tippy-box {
        background-color: #171E33;
        color: black;
        border: 1px solid #ededed;
        border-radius: 0;
      }
    ...

Even using the documentation where it shows the class names https://atomiks.github.io/tippyjs/v5/themes/

<div class="tippy-popper">
  <div class="tippy-tooltip" data-placement="top">
    <div class="tippy-content">
      My content
    </div>
  </div>
</div>

I tried to target it directly just to change anything, and no luck.

.tippy-content {
        background-color: tomato;
        color: yellow;
      }

I am really lost on how this works, and would appreciate any help or guidance on how I can go about solving this.

You are using tippy.js v6, but reading docs for v5. In v6 we need to use data-theme attribute for a custom theme. Lets call our custom theme voyager. We set it for the tippy.js targets:

tippy(targets, {
  theme: 'voyager',
});

And in the CSS file it's important that we do not put our custom styles in @layer components {} because TailwindCSS will detect them as unused styles and wont include them in the compiled CSS file.

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://unpkg.com/tippy.js@6/dist/tippy.css');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Customizing Tooltip Design 
  TailwindCSS will always include this! */
.tippy-box[data-theme~='voyager'] {
  background-color: #171E33;
  color: red;
  border: 1px solid #ededed;
  border-radius: 0;
}


@layer components {
   /* Normal TailwindCSS components */
}