2024-03-04 Tailwind CSS 自学自用其四

深色模式

暂时略过

重复样式

如果直接写数个相同样式的内容，那么 Tailwind 的内容也会重复数次
关于重复的Tailwind，有几种处理方式：

1. 代码编辑器的重复选取
2. 使用循环
3. 将需要重复使用的内容提取为组件
4. 通过@layer 和@apply关键词，在less文件中声明并达到复用的效果

官方示例

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

@layer components {
  .btn-primary {
    @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
  }
}

但是官方又不推荐使用 @apply，因为这样又违背了 Tailwind 的本质，这样你又要回归到想独特的类名，并且 css 文件也越来越大，所以非必要不使用@apply，只给高度重复的样式使用