React项目中Tailwind CSS base层样式未全部生效求助

问题根源 #

1. @Layer拼写错误：Tailwind CSS的@layer指令要求小写，你写的@Layer（大写L）无法被Tailwind正确识别，导致base层样式未注入到正确优先级层级，大部分样式被Preflight默认重置规则覆盖，仅hover:font-bold偶然生效。
2. 行内元素margin无效：a标签默认是行内元素，mb-3（margin-bottom）对行内元素不生效，必须将其改为行内块或块级元素才能让margin属性起作用。

修复方案 #

修改index.css，修正@layer拼写并添加display类：

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

@layer base {
  a {
    @apply text-blue-500 hover:underline hover:font-bold mb-3 inline-block;
  }
  li {
    @apply list-disc;
  }
}

额外说明 #

• 无需在index.html中添加隐藏div保留样式：Tailwind会自动识别@layer base内的工具类为“已使用”，不会被清除。
• React Router的Link组件本质仍是a标签，此样式会自动应用到所有Link。

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