Apostrophe CMS中Tailwind CSS配置编译顺序错误导致自定义字体不生效

解决方案 #

1. 调整样式层级，使用@layer规则覆盖默认基础样式
   在你的全局SCSS入口文件中，在引入Tailwind指令之后加入以下代码，明确将全局字体规则挂载到Tailwind的base层，优先级会高于Tailwind自带的默认base样式：

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

@layer base {
  body {
    font-family: theme('fontFamily.sans');
  }
}

2. 检查Apostrophe CMS的资源引入顺序
   确认你项目中自定义的Tailwind CSS文件的引入顺序晚于CMS自带的默认样式文件，后引入的同优先级CSS规则会覆盖先引入的规则。
3. 确认Tailwind配置的覆写逻辑
   你当前的配置是直接覆写整个theme.fontFamily配置项，会完全替换Tailwind默认的字体配置，如果你的项目中仍出现默认字体规则，可尝试修改配置为追加到默认配置前的写法：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: [ 'Graphik', ...require('tailwindcss/defaultTheme').fontFamily.sans ],
        serif: [ 'Merriweather', ...require('tailwindcss/defaultTheme').fontFamily.serif ]
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
};

4. 兜底方案：强制提高自定义字体优先级
   如果以上方法都不生效，可以在全局SCSS中直接用高优先级选择器指定字体：

html, body {
  font-family: 'Graphik', sans-serif !important;
}

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