#Two css files with mostly same content

27 messages · Page 1 of 1 (latest)

gaunt shell
#

Hi! I am getting two css files, one 50 kb and one 57 kb when I request my homepage. I am also getting the font twice. Css files are mostly the same: https://www.diffchecker.com/Jd6cequw/
Live version of the website: https://auctions-frontend-astro.vercel.app/
I used AstroWind template.
Any idea why is this happening? ty!

image.png
Astro css diff - Diff Checker

Astro css diff - *,:after,:before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:after

SuperDuperAuctions
SuperDuperAuctions - World of Warcraft Auction House Browser

Your auctioneer, on the web! Browse hundreds of items on dozens of World of Warcraft Auction Houses from anywhere, all in one place.

# 
<link rel="stylesheet" href="/_astro/404.b213e834.css" />  
<link rel="stylesheet" href="/_astro/index.ab943da2.css" /></head>
``` This is the end of the head tag. How are these stylesheets getting added here?
gaunt shell
#

anybody have an idea?

obtuse hollow
#

Is there CSS being imported in the Layout Component?

weary kernel
#

Are you using Astro.glob anywhere?

gaunt shell
#

site gets messed up when I remove that line at the top

#

But I don't get the two css files and duplicate fonts when I remove it

gaunt shell
weary kernel
#

I'm not too sure why its happening but as a quick fix you could try removing the custom 404 page, I also had a similar problem with my fonts loading twice awhile ago but I think it was just assets leaks from Astro.glob

#

Another way you can get assets leaks is when using the layout property in the frontmatter of a content collections file

gaunt shell
#

I deleted all 404 pages and still getting two font files in dev mode

#

I'll try deleting more stuff

weary kernel
gaunt shell
#

I delete that component, and no font gets called

#

but base.css is still called twice

#

I'm looking at MetaTags.astro and AstroSeo.astro

#

these are the base.css files getting called

# 
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .text-page {
    color: var(--aw-color-text-page);
  }

  .text-muted {
    color: var(--aw-color-text-muted);
  }

  .bg-light {
    background-color: var(--aw-color-bg-page);
  }

  .bg-dark {
    @apply bg-slate-900;
  }

  
  .btn {
    @apply inline-flex items-center justify-center rounded-full shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
  }

  .btn-ghost {
    @apply border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
  }

  .btn-primary {
    @apply font-semibold bg-primary text-white border-primary hover:bg-blue-900 hover:border-blue-900 hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-blue-900 dark:hover:bg-blue-900;
  }
}

#header.scroll {
  @apply shadow-md md:shadow-lg bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

[astro-icon].icon-light > * {
  stroke-width: 1.2;
}

[astro-icon].icon-bold > * {
  stroke-width: 2.4;
}

[data-aw-toggle-menu] path {
  @apply transition;
}
[data-aw-toggle-menu].expanded g > path:first-child {
  @apply -rotate-45 translate-y-[15px] translate-x-[-3px];
}

[data-aw-toggle-menu].expanded g > path:last-child {
  @apply rotate-45 translate-y-[-8px] translate-x-[14px];
}
``` src/assets/styles/base.css

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```@astrojs/tailwind/base.css
#

so base css is essentially getting called twice?

gaunt shell
#

I deleted node_modules/@astrojs/tailwind/base.css contents, built the project, and now it does not request 404.css

#

but how do i fix this problem of node_modules/@astrojs/tailwind/base.css getting called?

gaunt shell
#

if I remove
"@tailwind base;
@tailwind components;
@tailwind utilities;"
from assets/styles/base.css, I get this error:
@layer components is used but no matching @tailwind components directive is present.

#

I think I solved it! problem was

integrations: [tailwind({
    config: {
      applyBaseStyles: true
    }

applyBaseStyles being true in the config. I'll test this but my API went boom lol