(并在不破坏零配置构建的情况下使其成为默认的无堆栈?)
我使用sv create
向导创建了一个新项目并选择了 Tailwind CSS。
脚手架不会生成tailwind.config.js
或postcss.config.cjs
。
src/app.css
看起来像这样(并且所有内容在 UI 中正确呈现):
@import 'tailwindcss';
@plugin '@tailwindcss/typography';
目标
从 Google Fonts 加载 Montserrat 并将其设为整个网站的默认无衬线字体 (font-sans)。
我尝试过
- 在 src/routes/+layout.svelte 中添加了 Google Font 链接标签。
- 创建了 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;
- 用三层指令替换了 @import 'tailwindcss'; (这会破坏 tailwind 样式):
@tailwind base;
@tailwind components;
@tailwind utilities;
- 添加 postcss.config.cjs 内容如下:
module.exports = {
plugins: {
'@tailwindcss/postcss': {},
autoprefixer: {}
}
};
在此之后,pnpm dev 启动时没有出现错误,但 Tailwind 停止扫描我的 .svelte 文件——只保留了预检样式,所有实用程序都消失了。