[@astrojs/tailwind] Bundling font as base64 leads to bloated css output

[mrcaidev]

What version of astro are you using?

1.6.0

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

WSL2 - Arch

Describe the Bug

Problem

I use @fontsource/inter as a package in my project, and customize font family in tailwind.config.js:

module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter"],
      },
    },
  },
  // ...
};

After I run astro build, the integration @astrojs/tailwind bundles the font as base64, see the image below.

Seriousness

This almost doubles the size of the final CSS file. When I manually run tailwind -o output.css --minify, I got a 18KB CSS. But the size of the CSS generated by @astrojs/tailwind reaches 40KB.

I believe we are all concerned about web performance, and that's why I love Astro. But this unexpected behavior is frustrating.

What I've Found

• Base64 is only applied to inter-vietnamese-[weight]-[variant].[hash].woff2. Variants like Latin or Greek all work as expected.
• It's not reproducible on Stackblitz, etc. So I deployed it on Vercel. Check about.[hash].css in DevTools Network, and you shall see the bloated CSS.
• Another project I wrote in Next.js, also using Inter. This problem does not exist.

Source Code

https://github.com/mrcaidev/mrcai.dev

Link to Minimal Reproducible Example

https://mrcai.dev

Participation

• [ ] I am willing to submit a pull request for this issue.

[matthewp]

Does setting this to 0 fix it? https://vitejs.dev/config/build-options.html#build-assetsinlinelimit

[mrcaidev]

Yes! Thank you!