tailwind-styling

React 的 Tailwind CSS

概述

本技能介绍如何使用 Tailwind CSS 的工具类、响应式设计和性能最佳实践来为 React 组件设置样式。

核心理念

• 工具类优先：使用工具类组合设计
• 默认支持响应式：采用移动端优先的断点系统
• 组件提取：将模式提取为可复用组件
• 性能：使用 JIT 模式缩小打包体积

常见组件模式

按钮变体

interface ButtonProps {
  children: ReactNode;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  onClick?: () => void;
}

export const Button: FC<ButtonProps> = ({
  children,
  variant = 'primary',
  size = 'md',
  onClick
}) => {
  const baseClasses = 'font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';

  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
    secondary: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500',
    danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500'
  };

  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };

  return (
    <button
      onClick={onClick}
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`}
    >
      {children}
    </button>
  );
};

卡片组件

export const Card: FC<{ title: string; children: ReactNode; footer?: ReactNode }> = ({
  title,
  children,
  footer
}) => {
  return (
    <div className="bg-white shadow rounded-lg overflow-hidden">
      <div className="px-6 py-4 border-b border-gray-200">
        <h3 className="text-lg font-medium text-gray-900">{title}</h3>
      </div>
      <div className="px-6 py-4">{children}</div>
      {footer && (
        <div className="px-6 py-4 bg-gray-50 border-t border-gray-200">
          {footer}
        </div>
      )}
    </div>
  );
};

表单输入框

interface InputProps {
  label: string;
  error?: string;
  type?: string;
  value: string;
  onChange: (value: string) => void;
}

export const Input: FC<InputProps> = ({ label, error, type = 'text', value, onChange }) => {
  return (
    <div className="space-y-1">
      <label className="block text-sm font-medium text-gray-700">{label}</label>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={`
          block w-full rounded-md shadow-sm sm:text-sm
          ${error
            ? 'border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500'
            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
          }
        `}
      />
      {error && <p className="text-sm text-red-600">{error}</p>}
    </div>
  );
};

布局模式

容器

export const Container: FC<{ children: ReactNode }> = ({ children }) => {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      {children}
    </div>
  );
};

网格

export const ProductGrid: FC<{ products: Product[] }> = ({ products }) => {
  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

Flexbox 布局

// Sidebar layout
export const SidebarLayout: FC<{ sidebar: ReactNode; children: ReactNode }> = ({
  sidebar,
  children
}) => {
  return (
    <div className="flex flex-col md:flex-row gap-6">
      <aside className="w-full md:w-64 flex-shrink-0">
        {sidebar}
      </aside>
      <main className="flex-1">
        {children}
      </main>
    </div>
  );
};

响应式设计

断点

• sm: - 640px
• md: - 768px
• lg: - 1024px
• xl: - 1280px
• 2xl: - 1536px

移动端优先模式

<div className="
  text-base           /* Mobile */
  sm:text-lg          /* Tablet */
  lg:text-xl          /* Desktop */
  xl:text-2xl         /* Large screens */
">
  Responsive text
</div>

<div className="
  grid grid-cols-1    /* Mobile: 1 column */
  sm:grid-cols-2      /* Tablet: 2 columns */
  lg:grid-cols-3      /* Desktop: 3 columns */
  gap-4
">
  {/* Grid items */}
</div>

根据屏幕尺寸显示/隐藏

<div className="block md:hidden">Mobile only</div>
<div className="hidden md:block">Desktop only</div>

深色模式

配置

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
  // ...
};

实现

export const ThemeToggle = () => {
  const [dark, setDark] = useState(false);

  useEffect(() => {
    if (dark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [dark]);

  return (
    <button onClick={() => setDark(!dark)}>
      Toggle Theme
    </button>
  );
};

// Component with dark mode
<div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  Content
</div>

自定义工具类

扩展 Tailwind 配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... more shades
          900: '#0c4a6e',
        }
      },
      spacing: {
        '128': '32rem',
      },
      animation: {
        'fade-in': 'fadeIn 0.3s ease-in',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        }
      }
    }
  }
};

组件库模式

// components/ui/index.ts
export { Button } from './Button';
export { Card } from './Card';
export { Input } from './Input';
export { Badge } from './Badge';

// Usage
import { Button, Card } from '@/components/ui';

性能提示

1. 使用 JIT 模式：仅生成用到的类
2. 清除未使用的 CSS：正确配置内容路径
3. 提取组件：减少类的重复
4. 谨慎使用 @apply：优先使用工具类
5. 对工具类分组：使用编辑器插件进行整理

最佳实践

1. 遵循移动端优先原则：从移动端开始，再添加更大的断点
2. 使用语义化类名：用于提取出的组件
3. 保持一致性：使用配置中的设计令牌
4. 善用插件：表单、排版、宽高比
5. 将相关工具类分组：可读性 > 简洁性
6. 谨慎使用任意值：将 w-[137px] 作为最后手段
7. 实现深色模式：从一开始就做好规划
8. 测试响应式效果：检查所有断点