如何在TailwindCSS默认base、components与utilities层间插入自定义层？

你直接导入整个Tailwind并重新声明@layer列表导致了重复输出——因为@import "tailwindcss"已经包含了Tailwind默认的@layer theme, base, components, utilities声明，你额外写的那行会被原样保留，最终输出就会有两条重复规则。

要在Tailwind内置层之间插入自定义层并控制优先级，正确的做法是拆分导入Tailwind的各个模块，再在对应位置插入你的自定义层：

/* input.css */
/* 先导入基础层和主题层 */
@import "tailwindcss/base";
@import "tailwindcss/theme";

/* 定义自定义层，优先级介于theme和components之间 */
@layer custom {
  .custom-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    background-color: #3b82f6;
    color: white;
  }
}

/* 再导入组件层和工具类层 */
@import "tailwindcss/components";
@import "tailwindcss/utilities";

这样CSS的输出顺序就是base → theme → custom → components → utilities，优先级依次升高（后面的层样式会覆盖前面的），完美实现自定义层插入到指定位置的需求，同时不会出现重复的@layer声明。

本质上，Tailwind的层优先级由它们在最终CSS中的顺序决定，通过拆分导入并插入自定义层，就能精准控制层级关系，不需要手动重写整个@layer列表。

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