主页 / coding / 问题 / 79584290
Accepted
shadyseal
Asked: 2025-04-21 16:44:11 +0800 CST

SvelteKit (adapter‑static) + Tailwind v4 - 如何添加 Google 字体？

  • 772

（并在不破坏零配置构建的情况下使其成为默认的无堆栈？）

我使用sv create向导创建了一个新项目并选择了 Tailwind CSS。

脚手架不会生成tailwind.config.js或postcss.config.cjs。 src/app.css看起来像这样（并且所有内容在 UI 中正确呈现）：

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

目标

从 Google Fonts 加载 Montserrat 并将其设为整个网站的默认无衬线字体 (font-sans)。

我尝试过

  1. 在 src/routes/+layout.svelte 中添加了 Google Font 链接标签。
  2. 创建了 tailwind.config.ts (和 .js) 来扩展 fontFamily：
import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';

export default {
  content: ['./src/**/*.{svelte,html,js,ts}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Montserrat"', ...defaultTheme.fontFamily.sans]
      }
    }
  },
  plugins: []
} satisfies Config;
  1. 用三层指令替换了 @import 'tailwindcss'; (这会破坏 tailwind 样式)：
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 添加 postcss.config.cjs 内容如下：
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {}
  }
};

在此之后，pnpm dev 启动时没有出现错误，但 Tailwind 停止扫描我的 .svelte 文件——只保留了预检样式，所有实用程序都消失了。

tailwind-css

1 个回答

  1. Best Answer

    撤消所有步骤，回到运行良好时的状态，ala：

    @import 'tailwindcss';
@plugin '@tailwindcss/typography';

    您遵循的步骤适用于 v3，但您似乎正在使用 v4，因此我们应该以 v4 样式配置 Tailwind 的主题变量。

    将所有内容恢复后，将以下内容添加到src/app.css：

    @theme {
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

    因此你的 CSS 文件应该如下所示：

    @import 'tailwindcss';
@plugin '@tailwindcss/typography';

@theme {
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

    有关在 v4 中自定义字体系列的详细信息，请参阅文档。

    • 0

相关问题