Tailwind基础层自定义类不生效问题求助

核心问题 #

你遇到的两个问题根源一致：

• 你在typography.css中定义的是组合选择器（如.p.subheading、.p.xxl），而非独立的CSS类。但你在@apply中调用的是subheading、xxl这类独立类名，Tailwind无法匹配到对应的样式规则，自然不会生效。
• 由于.p.subheading仅对同时拥有.p和.subheading的元素生效，但你未定义独立的.subheading类，@apply subheading无法触发font-normal样式，只能保留.p的font-light。同理，.p.xxl不是独立类，@apply xxl无法应用font-size。

修复步骤 #

1. 重构typography.css的类定义

将组合选择器改为独立类，让@apply能正确识别：

@layer base {
  /* 基础文本样式类 */
  .p {
    @apply font-light;
  }
  /* 独立的修饰类 */
  .subheading {
    @apply font-normal;
  }
  .xxl {
    font-size: 1.5rem;
  }
  .xl {
    font-size: 1.375rem;
  }
}

如果你希望这些类拥有更高优先级（方便覆盖默认样式），可以把@layer base改为@layer utilities，Tailwind工具类的优先级高于基础类。

2. 调整文件引入顺序（可选但规范）

将自定义样式文件放在Tailwind核心文件之前，确保@layer内容被正确注入到Tailwind的层级体系中：

@import "base/typography.postcss";

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "parts/post.postcss";

3. 验证post.css的@apply调用

你的post.css无需修改，现在@apply p xxl subheading会正确合并三个独立类的样式：

.post {
  h1,
  h2 {
    @apply p xxl subheading;
  }
  h3,
  h4 {
    @apply p xl subheading;
  }

  p {
    @apply p;
  }
  ul {
    @apply p list-disc list-inside;
  }
  p strong {
    @apply p subheading;
  }
}

进阶优化（符合Tailwind规范） #

更推荐直接在tailwind.config.js中扩展主题，避免自定义CSS类：

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'p-xxl': '1.5rem',
        'p-xl': '1.375rem',
      },
      fontWeight: {
        'p-light': '300', // 对应font-light
        'p-normal': '400', // 对应font-normal
      }
    }
  }
}

然后在post.css中直接使用Tailwind原生类：

.post {
  h1,
  h2 {
    @apply font-p-normal text-p-xxl;
  }
  /* 其他样式同理 */
}

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