使用Tailwind @apply自定义类生成错误样式的求助

在使用Tailwind CSS的@apply指令时，无法正确应用自定义的复合CSS类（如.p.lg）。

自定义类定义（typography.css）：

.p.xl {
  font-size: 1.375rem;
}

.p.lg {
  font-size: 1.25rem;
}

.p {
  font-size: 1.125rem;
}

.p.sm {
  font-size: 0.875rem;
}

尝试用@apply组合类：

.link {
  @apply p lg;
}

生成的代码仅包含.p的默认样式：

.link {
    font-size: 1.125rem;
}

调整类顺序、使用内联class="p lg"、修改.p为:not选择器、添加!important均无法解决问题，字体权重相关的复合类也出现相同异常。

Tailwind的@apply指令核心逻辑是将单个CSS类的样式合并到目标选择器中，它无法识别.p.lg这种复合选择器——你写@apply p lg时，Tailwind会分别查找独立的.p类和.lg类的样式，但你的.lg并不是独立类，只是.p的附属变体，因此无法正确应用复合类的样式。

方案1：将变体改为独立工具类 #

把每个变体做成独立类，再和基础类组合使用：

/* typography.css */
.p {
  font-size: 1.125rem;
}
.p-xl {
  font-size: 1.375rem;
}
.p-lg {
  font-size: 1.25rem;
}
.p-sm {
  font-size: 0.875rem;
}

在@apply中组合：

.link {
  @apply p p-lg;
}

注：确保变体类定义在基础类之后，避免样式被覆盖。

方案2：用Tailwind插件注册自定义样式 #

通过Tailwind插件系统注册自定义工具类，贴合框架原生用法：

// tailwind.config.js
module.exports = {
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.p': {
          fontSize: '1.125rem',
        },
        '.p-xl': {
          fontSize: '1.375rem',
        },
        '.p-lg': {
          fontSize: '1.25rem',
        },
        '.p-sm': {
          fontSize: '0.875rem',
        },
      })
    }
  ]
}

之后可正常用@apply p p-lg或内联class="p p-lg"，Tailwind会正确合并样式。

方案3：使用CSS @extend（谨慎使用） #

若必须保留复合类写法，可使用CSS原生@extend继承复合选择器样式：

.link {
  @extend .p.lg;
}

注意：需确保.p.lg类不会被Tailwind摇树优化移除，可将自定义类用@layer包裹：

/* typography.css */
@layer utilities {
  .p.xl {
    font-size: 1.375rem;
  }

  .p.lg {
    font-size: 1.25rem;
  }

  .p {
    font-size: 1.125rem;
  }

  .p.sm {
    font-size: 0.875rem;
  }
}

不要试图用@apply直接组合复合选择器的两个部分，因为@apply仅处理独立类。优先选择方案1或方案2，贴合Tailwind设计理念，避免后续出现样式优先级或摇树优化问题。

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