如何在Sapper项目中添加全局样式并设置Poppins为全局字体

• 第一步：调整tailwind.css的样式顺序和写法
  你之前把全局通配符样式写在了@tailwind指令前，Tailwind的基础样式会直接覆盖这部分规则，正确的写法如下：

/* static/tailwind.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

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

/* 全局样式写在所有@tailwind指令之后，避免被覆盖 */
* {
    font-family: "Poppins", sans-serif;
}

更符合Tailwind规范的方式是使用@layer base封装全局基础样式，会自动整合到基础样式层避免被覆盖：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

@tailwind base;
@layer base {
  * {
    font-family: "Poppins", sans-serif;
  }
}
@tailwind components;
@tailwind utilities;

• 第二步：可选优化（更适配Tailwind使用逻辑）
  在tailwind.config.js中扩展默认字体族，将Poppins设为默认无衬线字体，后续所有font-sans类都会自动应用该字体：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
      },
    },
  }
}

修改后你可以直接在项目根布局（通常是src/routes/_layout.svelte）的根元素上添加class="font-sans"即可全局生效，不需要额外写通配符样式。

• 第三步：生效验证
  修改完成后重启本地开发服务，清除浏览器缓存后再预览，确认没有组件内的内联样式、scoped样式覆盖全局字体规则即可。

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