tailwind-styling（Tailwind CSS styling 前端）

Tailwind CSS for React

Overview

This skill provides guidance for styling React components with Tailwind CSS using utility classes, responsive design, and performance best practices.

Core Philosophy

• Utility-first: Compose designs from utility classes
• Responsive by default: Mobile-first breakpoint system
• Component extraction: Extract patterns into reusable components
• Performance: Minimize bundle size with JIT mode

Common Component Patterns

Button Variants

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>
  );
};

Card Component

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>
  );
};

Form Input

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>
  );
};

Layout Patterns

Container

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>
  );
};

Grid

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 Layouts

// 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>
  );
};

Responsive Design

Breakpoints

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

Mobile-First Pattern

<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>

Show/Hide Based on Screen Size

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

Dark Mode

Configuration

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

Implementation

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>

Custom Utilities

Extend Tailwind Config

// 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' },
        }
      }
    }
  }
};

Component Library Pattern

// 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';

Performance Tips

1. Use JIT mode: Generates only used classes
2. Purge unused CSS: Configure content paths correctly
3. Extract components: Reduce class duplication
4. Use @apply sparingly: Prefer utility classes
5. Group utilities: Use editor plugins for organization

Best Practices

1. Follow mobile-first: Start with mobile, add larger breakpoints
2. Use semantic class names: For extracted components
3. Maintain consistency: Use design tokens from config
4. Leverage plugins: Forms, typography, aspect-ratio
5. Group related utilities: Readability > brevity
6. Use arbitrary values sparingly: w-[137px] as last resort
7. Implement dark mode: Plan for it from the start
8. Test responsiveness: Check all breakpoints