使用Tailwind CSS时，非Tailwind相关的自定义CSS类应当存放在哪里？

Tailwind 官方推荐按照样式的作用，把自定义样式放到对应@layer层级中，这是目前最规范的组织方式，具体规则如下：

• 全局基础重置样式、HTML原生元素默认样式，放到@layer base层
• 可复用的自定义组件类（比如你写的按钮类、Spinner加载动画类），放到@layer components层
• 特殊的自定义工具类（比如单行截断、文本渐变这类通用工具），放到@layer utilities层

这么做的核心优势 #

• 自动摇树优化：只有你项目中实际用到的自定义类会被打包进最终CSS，不会产生冗余代码
• 优先级可控：Tailwind 会严格按照 base < components < utilities 的顺序处理样式，你可以随时用Tailwind自带的工具类覆盖组件类的默认样式，不会出现优先级冲突
• 可以直接使用Tailwind提供的@apply、theme()等指令，统一调用配置文件里的设计token，不用硬写色值、尺寸等固定值

你现有代码调整后的示例 #

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

@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

@layer components {
  .btn-primary {
    @apply py-2 font-bold text-white transition duration-200 rounded shadow-lg  hover:shadow-xl disabled:opacity-50;
  }
  .btn-link {
    @apply mb-6 text-sm hover:underline
  }

  .lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    margin: 8px;
    border: 4px solid #fa6400;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fa6400 transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

注意：原来你写在@layer components里的类末尾多余的逗号要删掉，否则会出现CSS语法错误。

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