如何在Tailwind v4 alpha中创建容器、按钮等组件？

Tailwind v4 Alpha 里的@theme规则仅用于扩展主题系统（比如自定义颜色、间距、断点这类设计变量），不能在里面定义CSS类选择器，这就是你之前报错的核心原因。下面是创建容器、按钮组件的正确实现方法：

一、自定义容器组件 #

使用@layer components来定义容器类，可结合主题变量或Tailwind内置工具类实现：

方式1：结合自定义主题变量 #

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

/* 先在@theme里定义容器的padding变量（仅支持属性/keyframes） */
@theme {
  --container-padding: clamp(1rem, 3vw, 2rem);
}

/* 在@layer components中定义容器类 */
@layer components {
  .container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }
}

方式2：直接复用Tailwind内置工具类 #

如果不需要自定义变量，用@apply复用内置工具类更简洁：

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-4 md:px-6;
  }
}

二、自定义按钮组件 #

同样通过@layer components定义，可灵活组合工具类或自定义主题属性：

方式1：复用Tailwind工具类快速实现 #

@layer components {
  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
  }
}

方式2：结合自定义主题颜色 #

先在@theme里扩展自定义颜色变量，再在组件类中引用：

@theme {
  --color-btn-primary: #2563eb;
  --color-btn-primary-hover: #1d4ed8;
  --color-btn-secondary: #e5e7eb;
  --color-btn-secondary-hover: #d1d5db;
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-md font-medium transition-colors duration-200;
  }

  .btn-primary {
    background-color: var(--color-btn-primary);
    color: white;

    &:hover {
      background-color: var(--color-btn-primary-hover);
    }
  }

  .btn-secondary {
    background-color: var(--color-btn-secondary);
    color: #1f2937;

    &:hover {
      background-color: var(--color-btn-secondary-hover);
    }
  }
}

补充：@theme规则的正确用法 #

在Tailwind v4 Alpha中，@theme仅允许定义CSS自定义属性（变量）和@keyframes，示例：

@theme {
  /* 自定义颜色变量 */
  --color-accent: #f59e0b;
  /* 自定义间距变量 */
  --spacing-xl: 4rem;
  /* 自定义动画 */
  @keyframes slide-up {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

这些定义的主题内容可直接在工具类、组件类中引用，比如@apply text-accent或animation: slide-up 0.3s ease;。

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