如何使用Tailwind CSS创建一个组合了很多样式的类名，实现样式复用

在HTML中避免重复写多个Tailwind的实用类，而是通过一个自定义的类名来应用这些样式。

一、定义

方式 1：使用 @layer 和 @apply（推荐）

在全局 CSS 文件中定义：

/* src/main.css 或全局 CSS 文件 */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
   
  /* 组合多个 tailwind 类 */
  .my-custom-class {
   
    @apply p-4 bg-blue-500 text-white rounded-lg 
           hover:bg-blue-600 transition-all 
           focus:ring-2 focus:ring-blue-300;
  }

  /* 带响应式的组合 */
  .responsive-card {
   
    @apply p-2 md:p-4 lg:p-6 
           bg-white shadow-sm 
           hover:shadow-md 
           rounded-md 
           transition-all;
  }
}

方式 2：通过 tailwind.config.js 扩展

// tailwind.config.js
module.exports = {
   
  content: ['./src/**/*.{html,js}'],
  theme: {
   
    extend: {
   
      components: {