SvelteKit(adapter-static)+Tailwind v4：添加谷歌字体并设为默认无衬线字体且不破坏零配置构建

问题根源 #

你手动创建的postcss.config.cjs破坏了SvelteKit官方Tailwind集成的默认配置，同时使用了不存在的插件@tailwindcss/postcss（正确插件为tailwindcss），导致Tailwind无法扫描Svelte文件生成工具类。

修复步骤 #

1. 删除手动创建的postcss.config.cjs
   SvelteKit通过create-svelte生成的Tailwind项目已内置正确的PostCSS配置，手动添加配置会覆盖原有逻辑，直接删除该文件即可。

2. 调整src/app.css内容
   修改为标准的Tailwind层指令格式：

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

3. 优化tailwind.config.ts配置
   将typography插件移到配置文件中，同时确认content路径正确：

   import type { Config } from 'tailwindcss';
   import defaultTheme from 'tailwindcss/defaultTheme';
   import typography from '@tailwindcss/typography';
   
   export default {
     content: ['./src/**/*.{svelte,html,js,ts}'],
     theme: {
       extend: {
         fontFamily: {
           sans: ['"Montserrat"', ...defaultTheme.fontFamily.sans]
         }
       }
     },
     plugins: [typography]
   } satisfies Config;
   

4. 确认字体链接与样式导入
   检查src/routes/+layout.svelte，确保谷歌字体链接正确且app.css已导入：

   <script>
     import '../app.css';
   </script>
   
   <svelte:head>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">
   </svelte:head>
   
   <slot />
   

5. 重启开发服务
   停止pnpm dev后重新启动，必要时可删除node_modules/.cache目录清除缓存，确保配置生效。

验证 #

重启后，Tailwind会正常扫描Svelte文件生成工具类，全站默认无衬线字体将替换为Montserrat。

内容的提问来源于stack exchange，提问作者shadyseal