AI原生前端开发（043）：AI辅助的样式生成（Tailwind CSS）

前言

Tailwind CSS是流行的原子化CSS框架！AI可以帮我们快速生成优美的Tailwind样式！

1. AI辅助Tailwind组件开发

1.1 卡片组件

javascript 复制代码

/* 提示词：
"用Tailwind CSS写一个产品卡片组件，要求：
1. 包含图片、标题、描述、价格
2. 悬停效果
3. 响应式设计"
*/

// ProductCard.tsx
interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  image: string;
}

export default function ProductCard({ product }: { product: Product }) {
  return (
    <div className="group bg-white rounded-xl border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow duration-300">
      <div className="aspect-square overflow-hidden bg-gray-100">
        <img
          src={product.image}
          alt={product.name}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
        />
      </div>
      <div className="p-4">
        <h3 className="font-semibold text-gray-900 line-clamp-2 mb-1">
          {product.name}
        </h3>
        <p className="text-sm text-gray-500 line-clamp-2 mb-3">
          {product.description}
        </p>
        <div className="flex items-center justify-between">
          <span className="text-xl font-bold text-blue-600">
            ¥{product.price}
          </span>
          <button className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
            加入购物车
          </button>
        </div>
      </div>
    </div>
  );
}

1.2 按钮组件库

javascript 复制代码

/* 提示词：
"用Tailwind CSS创建一套按钮组件，包含：
1. 主要、次要、危险按钮
2. 不同尺寸
3. 禁用状态
4. 加载状态"
*/

import { cva, type VariantProps } from 'class-variance-authority';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none',
  {
    variants: {
      variant: {
        primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500',
        danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
        ghost: 'hover:bg-gray-100 hover:text-gray-900'
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4 text-sm',
        lg: 'h-12 px-6 text-base'
      }
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md'
    }
  }
);

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  isLoading?: boolean;
}

export default function Button({
  className,
  variant,
  size,
  isLoading,
  children,
  ...props
}: ButtonProps) {
  return (
    <button
      className={buttonVariants({ variant, size, className })}
      disabled={isLoading || props.disabled}
      {...props}
    >
      {isLoading && (
        <svg className="animate-spin -ml-1 mr-2 h-4 w-4" viewBox="0 0 24 24">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
        </svg>
      )}
      {children}
    </button>
  );
}

// 使用示例
/*
<Button variant="primary" size="md">主要按钮</Button>
<Button variant="secondary" size="sm">次要按钮</Button>
<Button variant="danger" isLoading>加载中</Button>
*/

2. 今日小结

这一篇我们学习了：

AI辅助Tailwind组件开发
组件库设计

3. 下篇预告

下一篇，我们学习 AI辅助的动画与交互设计！