Tailwind CSS 函数与指令 #

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

/* 基础层：重置和基础样式 */
@tailwind base;

/* 组件层：组件类 */
@tailwind components;

/* 工具层：实用类 */
@tailwind utilities;

@tailwind variants;

@layer base {
  h1 {
    @apply text-4xl font-bold;
  }
  
  h2 {
    @apply text-3xl font-semibold;
  }
  
  a {
    @apply text-blue-500 hover:text-blue-700;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-medium transition-colors;
  }
  
  .btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
  }
  
  .btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .text-shadow-lg {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
  }
}

.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

.card-title {
  @apply text-lg font-semibold text-gray-900;
}

.card-body {
  @apply text-gray-600 mt-2;
}

.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
  @apply hover:bg-blue-600;
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.container {
  @apply px-4;
  @apply md:px-8;
  @apply lg:px-12;
}

.card {
  @apply bg-white dark:bg-gray-800;
  @apply text-gray-900 dark:text-white;
  @apply border border-gray-200 dark:border-gray-700;
}

/* 不推荐：过度使用 @apply */
.card {
  @apply flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200;
}

/* 推荐：保持简洁 */
.card {
  @apply bg-white rounded-lg shadow-md p-4;
}

.btn {
  padding: theme('spacing.4') theme('spacing.6');
  border-radius: theme('borderRadius.md');
  background-color: theme('colors.blue.500');
}

.custom-shadow {
  box-shadow: theme('boxShadow.lg');
}

.custom-font {
  font-family: theme('fontFamily.sans');
}

.element {
  color: theme('colors.brand', '#3b82f6');
}

@layer components {
  .btn {
    background-color: theme('colors.primary.500');
    padding: theme('spacing.2') theme('spacing.4');
    border-radius: theme('borderRadius.lg');
    font-weight: theme('fontWeight.semibold');
  }
}

@layer components {
  .responsive-text {
    font-size: theme('fontSize.base');
    
    @media (min-width: theme('screens.md')) {
      font-size: theme('fontSize.lg');
    }
    
    @media (min-width: theme('screens.lg')) {
      font-size: theme('fontSize.xl');
    }
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center;
    @apply px-4 py-2;
    @apply font-medium rounded-lg;
    @apply transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply bg-blue-500 text-white;
    @apply hover:bg-blue-600;
    @apply focus:ring-blue-500;
    @apply active:bg-blue-700;
  }
  
  .btn-secondary {
    @apply bg-gray-200 text-gray-800;
    @apply hover:bg-gray-300;
    @apply focus:ring-gray-500;
  }
  
  .btn-outline {
    @apply border-2 border-blue-500 text-blue-500;
    @apply hover:bg-blue-500 hover:text-white;
    @apply focus:ring-blue-500;
  }
  
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }
  
  .btn-lg {
    @apply px-6 py-3 text-lg;
  }
}

@layer components {
  .card {
    @apply bg-white dark:bg-gray-800;
    @apply rounded-lg shadow-md;
    @apply border border-gray-200 dark:border-gray-700;
    @apply overflow-hidden;
  }
  
  .card-header {
    @apply px-6 py-4;
    @apply border-b border-gray-200 dark:border-gray-700;
    @apply bg-gray-50 dark:bg-gray-900;
  }
  
  .card-body {
    @apply p-6;
  }
  
  .card-footer {
    @apply px-6 py-4;
    @apply border-t border-gray-200 dark:border-gray-700;
    @apply bg-gray-50 dark:bg-gray-900;
  }
}

@layer components {
  .form-group {
    @apply space-y-1;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
  }
  
  .form-input {
    @apply w-full px-4 py-2;
    @apply border border-gray-300 dark:border-gray-600 rounded-lg;
    @apply bg-white dark:bg-gray-700;
    @apply text-gray-900 dark:text-white;
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    @apply placeholder:text-gray-400;
  }
  
  .form-error {
    @apply text-sm text-red-500;
  }
  
  .form-hint {
    @apply text-sm text-gray-500;
  }
}

@layer components {
  .nav {
    @apply flex items-center space-x-4;
  }
  
  .nav-link {
    @apply px-3 py-2;
    @apply text-gray-600 dark:text-gray-300;
    @apply hover:text-blue-500 dark:hover:text-blue-400;
    @apply transition-colors;
  }
  
  .nav-link-active {
    @apply text-blue-500 dark:text-blue-400;
    @apply font-medium;
  }
}

<!-- 推荐 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  按钮
</button>

<!-- 不推荐 -->
<button class="btn-primary">按钮</button>

<style>
.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;
}
</style>

/* 适合使用 @apply：真正需要复用的组件 */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 rounded font-medium transition-colors;
}

/* 不适合使用 @apply：一次性样式 */
.hero {
  /* 直接写 CSS，不要用 @apply */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 基础样式 */
@layer base {
  html {
    scroll-behavior: smooth;
  }
}

/* 组件样式 */
@layer components {
  .btn { }
  .card { }
}

/* 工具类 */
@layer utilities {
  .text-shadow { }
}