本节将介绍如何使用 Tailwind CSS 开发一个现代化的响应式企业官网，包括页面布局、组件开发、响应式设计等方面。

页面布局

导航栏组件

  1. // components/Navbar.tsx
  2. import { useState } from 'react';
  4. const Navbar = () => {
  5.   const [isOpen, setIsOpen] = useState(false);
  7.   return (
  8.     <nav className="bg-white shadow-lg fixed w-full top-0 z-50">
  9.       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  10.         <div className="flex justify-between h-16">
  11.           {/* Logo */}
  12.           <div className="flex-shrink-0 flex items-center">
  13.             <img
  14.               className="h-8 w-auto"
  15.               src="/logo.svg"
  16.               alt="Company Logo"
  17.             />
  18.           </div>
  20.           {/* Desktop Menu */}
  21.           <div className="hidden md:flex md:items-center md:space-x-8">
  22.             <a href="#" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
  23.               首页
  24.             </a>
  25.             <a href="#" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
  26.               产品
  27.             </a>
  28.             <a href="#" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
  29.               解决方案
  30.             </a>
  31.             <a href="#" className="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium">
  32.               关于我们
  33.             </a>
  34.             <button className="ml-8 bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors">
  35.               联系我们
  36.             </button>
  37.           </div>
  39.           {/* Mobile Menu Button */}
  40.           <div className="md:hidden flex items-center">
  41.             <button
  42.               onClick={() => setIsOpen(!isOpen)}
  43.               className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
  44.             >
  45.               <svg
  46.                 className={`${isOpen ? 'hidden' : 'block'} h-6 w-6`}
  47.                 stroke="currentColor"
  48.                 fill="none"
  49.                 viewBox="0 0 24 24"
  50.               >
  51.                 <path
  52.                   strokeLinecap="round"
  53.                   strokeLinejoin="round"
  54.                   strokeWidth="2"
  55.                   d="M4 6h16M4 12h16M4 18h16"
  56.                 />
  57.               </svg>
  58.               <svg
  59.                 className={`${isOpen ? 'block' : 'hidden'} h-6 w-6`}
  60.                 stroke="currentColor"
  61.                 fill="none"
  62.                 viewBox="0 0 24 24"
  63.               >
  64.                 <path
  65.                   strokeLinecap="round"
  66.                   strokeLinejoin="round"
  67.                   strokeWidth="2"
  68.                   d="M6 18L18 6M6 6l12 12"
  69.                 />
  70.               </svg>
  71.             </button>
  72.           </div>
  73.         </div>
  74.       </div>
  76.       {/* Mobile Menu */}
  77.       <div className={`${isOpen ? 'block' : 'hidden'} md:hidden`}>
  78.         <div className="px-2 pt-2 pb-3 space-y-1">
  79.           <a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
  80.             首页
  81.           </a>
  82.           <a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
  83.             产品
  84.           </a>
  85.           <a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
  86.             解决方案
  87.           </a>
  88.           <a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
  89.             关于我们
  90.           </a>
  91.           <button className="w-full bg-blue-500 text-white px-4 py-2 rounded-lg text-base font-medium hover:bg-blue-600 transition-colors">
  92.             联系我们
  93.           </button>
  94.         </div>
  95.       </div>
  96.     </nav>
  97.   );
  98. };

Hero 区域

  1. // components/Hero.tsx
  2. const Hero = () => {
  3.   return (
  4.     <div className="relative bg-white overflow-hidden">
  5.       <div className="max-w-7xl mx-auto">
  6.         <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
  7.           <main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
  8.             <div className="sm:text-center lg:text-left">
  9.               <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
  10.                 <span className="block">打造现代化的</span>
  11.                 <span className="block text-blue-600">企业数字体验</span>
  12.               </h1>
  13.               <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
  14.                 我们提供全方位的数字化解决方案，帮助企业实现数字化转型，提升运营效率，创造更大的商业价值。
  15.               </p>
  16.               <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
  17.                 <div className="rounded-md shadow">
  18.                   <a
  19.                     href="#"
  20.                     className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10"
  21.                   >
  22.                     开始使用
  23.                   </a>
  24.                 </div>
  25.                 <div className="mt-3 sm:mt-0 sm:ml-3">
  26.                   <a
  27.                     href="#"
  28.                     className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 md:py-4 md:text-lg md:px-10"
  29.                   >
  30.                     了解更多
  31.                   </a>
  32.                 </div>
  33.               </div>
  34.             </div>
  35.           </main>
  36.         </div>
  37.       </div>
  38.       <div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
  39.         <img
  40.           className="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
  41.           src="/hero-image.jpg"
  42.           alt="Hero Image"
  43.         />
  44.       </div>
  45.     </div>
  46.   );
  47. };

功能组件

特性展示组件

  1. // components/Features.tsx
  2. const features = [
  3.   {
  4.     title: '快速部署',
  5.     description: '提供一站式部署解决方案，快速上线您的业务系统。',
  6.     icon: (
  7.       <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  8.         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
  9.       </svg>
  10.     ),
  11.   },
  12.   {
  13.     title: '安全可靠',
  14.     description: '采用业界领先的安全防护措施，保障您的数据安全。',
  15.     icon: (
  16.       <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  17.         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
  18.       </svg>
  19.     ),
  20.   },
  21.   // ... 更多特性
  22. ];
  24. const Features = () => {
  25.   return (
  26.     <div className="py-12 bg-white">
  27.       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  28.         <div className="lg:text-center">
  29.           <h2 className="text-base text-blue-600 font-semibold tracking-wide uppercase">特性</h2>
  30.           <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
  31.             更好的解决方案
  32.           </p>
  33.           <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
  34.             我们提供全面的解决方案，满足您的各种业务需求。
  35.           </p>
  36.         </div>
  38.         <div className="mt-10">
  39.           <div className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
  40.             {features.map((feature) => (
  41.               <div key={feature.title} className="relative">
  42.                 <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
  43.                   {feature.icon}
  44.                 </div>
  45.                 <p className="ml-16 text-lg leading-6 font-medium text-gray-900">{feature.title}</p>
  46.                 <dd className="mt-2 ml-16 text-base text-gray-500">{feature.description}</dd>
  47.               </div>
  48.             ))}
  49.           </div>
  50.         </div>
  51.       </div>
  52.     </div>
  53.   );
  54. };

客户案例组件

  1. // components/Cases.tsx
  2. const cases = [
  3.   {
  4.     title: '企业A的数字化转型',
  5.     description: '帮助企业A实现了全面的数字化转型，提升了30%的运营效率。',
  6.     image: '/case-1.jpg',
  7.   },
  8.   // ... 更多案例
  9. ];
  11. const Cases = () => {
  12.   return (
  13.     <div className="bg-gray-50 py-12 lg:py-20">
  14.       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  15.         <div className="text-center">
  16.           <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
  17.             成功案例
  18.           </h2>
  19.           <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
  20.             看看我们如何帮助客户实现业务增长。
  21.           </p>
  22.         </div>
  24.         <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
  25.           {cases.map((case_) => (
  26.             <div
  27.               key={case_.title}
  28.               className="flex flex-col rounded-lg shadow-lg overflow-hidden"
  29.             >
  30.               <div className="flex-shrink-0">
  31.                 <img
  32.                   className="h-48 w-full object-cover"
  33.                   src={case_.image}
  34.                   alt={case_.title}
  35.                 />
  36.               </div>
  37.               <div className="flex-1 bg-white p-6 flex flex-col justify-between">
  38.                 <div className="flex-1">
  39.                   <h3 className="text-xl font-semibold text-gray-900">
  40.                     {case_.title}
  41.                   </h3>
  42.                   <p className="mt-3 text-base text-gray-500">
  43.                     {case_.description}
  44.                   </p>
  45.                 </div>
  46.                 <div className="mt-6">
  47.                   <a
  48.                     href="#"
  49.                     className="text-base font-semibold text-blue-600 hover:text-blue-500"
  50.                   >
  51.                     了解更多 →
  52.                   </a>
  53.                 </div>
  54.               </div>
  55.             </div>
  56.           ))}
  57.         </div>
  58.       </div>
  59.     </div>
  60.   );
  61. };

响应式优化

媒体查询策略

  1. // styles/breakpoints.ts
  2. export const breakpoints = {
  3.   sm: '640px',   // 小屏幕设备
  4.   md: '768px',   // 平板设备
  5.   lg: '1024px',  // 小型笔记本
  6.   xl: '1280px',  // 大型笔记本
  7.   '2xl': '1536px' // 桌面设备
  8. };
  10. // 使用示例
  11. <div className="
  12.   grid
  13.   grid-cols-1
  14.   gap-6
  15.   sm:grid-cols-2
  16.   lg:grid-cols-3
  17.   xl:grid-cols-4
  18. ">
  19.   {/* 内容 */}
  20. </div>

图片响应式处理

  1. // components/ResponsiveImage.tsx
  2. interface ResponsiveImageProps {
  3.   src: string;
  4.   alt: string;
  5.   className?: string;
  6. }
  8. const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
  9.   src,
  10.   alt,
  11.   className = ''
  12. }) => {
  13.   return (
  14.     <picture>
  15.       <source
  16.         media="(min-width: 1024px)"
  17.         srcSet={`${src}?w=1200`}
  18.       />
  19.       <source
  20.         media="(min-width: 768px)"
  21.         srcSet={`${src}?w=800`}
  22.       />
  23.       <img
  24.         src={`${src}?w=400`}
  25.         alt={alt}
  26.         className={`w-full h-auto ${className}`}
  27.         loading="lazy"
  28.       />
  29.     </picture>
  30.   );
  31. };
  33. // 使用示例
  34. <ResponsiveImage
  35.   src="/hero-image.jpg"
  36.   alt="Hero Image"
  37.   className="rounded-lg shadow-lg"
  38. />

响应式导航

  1. // hooks/useResponsiveNav.ts
  2. import { useState, useEffect } from 'react';
  4. export const useResponsiveNav = () => {
  5.   const [isMenuOpen, setIsMenuOpen] = useState(false);
  6.   const [isMobile, setIsMobile] = useState(false);
  8.   useEffect(() => {
  9.     const checkWidth = () => {
  10.       setIsMobile(window.innerWidth < 768);
  11.       if (window.innerWidth >= 768) {
  12.         setIsMenuOpen(false);
  13.       }
  14.     };
  16.     window.addEventListener('resize', checkWidth);
  17.     checkWidth();
  19.     return () => window.removeEventListener('resize', checkWidth);
  20.   }, []);
  22.   return {
  23.     isMenuOpen,
  24.     setIsMenuOpen,
  25.     isMobile
  26.   };
  27. };

性能优化

图片懒加载

  1. // components/LazyImage.tsx
  2. import { useEffect, useRef, useState } from 'react';
  4. interface LazyImageProps {
  5.   src: string;
  6.   alt: string;
  7.   className?: string;
  8.   placeholder?: string;
  9. }
  11. const LazyImage: React.FC<LazyImageProps> = ({
  12.   src,
  13.   alt,
  14.   className = '',
  15.   placeholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  16. }) => {
  17.   const [isLoaded, setIsLoaded] = useState(false);
  18.   const [imageSrc, setImageSrc] = useState(placeholder);
  19.   const imageRef = useRef<HTMLImageElement>(null);
  21.   useEffect(() => {
  22.     const observer = new IntersectionObserver(
  23.       (entries) => {
  24.         entries.forEach((entry) => {
  25.           if (entry.isIntersecting) {
  26.             setImageSrc(src);
  27.             observer.unobserve(entry.target);
  28.           }
  29.         });
  30.       },
  31.       {
  32.         rootMargin: '50px'
  33.       }
  34.     );
  36.     if (imageRef.current) {
  37.       observer.observe(imageRef.current);
  38.     }
  40.     return () => {
  41.       if (imageRef.current) {
  42.         observer.unobserve(imageRef.current);
  43.       }
  44.     };
  45.   }, [src]);
  47.   return (
  48.     <img
  49.       ref={imageRef}
  50.       src={imageSrc}
  51.       alt={alt}
  52.       className={`
  53.         transition-opacity duration-300
  54.         ${isLoaded ? 'opacity-100' : 'opacity-0'}
  55.         ${className}
  56.       `}
  57.       onLoad={() => setIsLoaded(true)}
  58.     />
  59.   );
  60. };

组件优化

  1. // components/OptimizedCarousel.tsx
  2. import { memo } from 'react';
  4. interface CarouselProps {
  5.   items: Array<{
  6.     id: string;
  7.     image: string;
  8.     title: string;
  9.   }>;
  10. }
  12. const OptimizedCarousel = memo(({ items }: CarouselProps) => {
  13.   return (
  14.     <div className="relative overflow-hidden">
  15.       <div className="flex snap-x snap-mandatory overflow-x-auto">
  16.         {items.map((item) => (
  17.           <div
  18.             key={item.id}
  19.             className="snap-start flex-shrink-0 w-full md:w-1/2 lg:w-1/3"
  20.           >
  21.             <LazyImage
  22.               src={item.image}
  23.               alt={item.title}
  24.               className="w-full h-64 object-cover"
  25.             />
  26.             <h3 className="mt-2 text-lg font-medium text-gray-900">
  27.               {item.title}
  28.             </h3>
  29.           </div>
  30.         ))}
  31.       </div>
  32.     </div>
  33.   );
  34. });
  36. OptimizedCarousel.displayName = 'OptimizedCarousel';

动画效果

滚动动画

  1. // hooks/useScrollAnimation.ts
  2. import { useEffect, useRef } from 'react';
  4. export const useScrollAnimation = (options = {}) => {
  5.   const elementRef = useRef<HTMLElement>(null);
  7.   useEffect(() => {
  8.     const observer = new IntersectionObserver((entries) => {
  9.       entries.forEach((entry) => {
  10.         if (entry.isIntersecting) {
  11.           entry.target.classList.add('animate-fade-in');
  12.           observer.unobserve(entry.target);
  13.         }
  14.       });
  15.     }, options);
  17.     if (elementRef.current) {
  18.       observer.observe(elementRef.current);
  19.     }
  21.     return () => {
  22.       if (elementRef.current) {
  23.         observer.unobserve(elementRef.current);
  24.       }
  25.     };
  26.   }, []);
  28.   return elementRef;
  29. };
  31. // 使用示例
  32. const Section = () => {
  33.   const animationRef = useScrollAnimation({
  34.     threshold: 0.1
  35.   });
  37.   return (
  38.     <div
  39.       ref={animationRef}
  40.       className="opacity-0 transition-opacity duration-1000"
  41.     >
  42.       {/* 内容 */}
  43.     </div>
  44.   );
  45. };

最佳实践

  1. 响应式设计

    • 移动优先设计
    • 合理使用断点
    • 灵活的布局系统

  2. 性能优化

    • 图片优化
    • 组件懒加载
    • 动画性能

  3. 用户体验

    • 交互反馈
    • 加载状态
    • 平滑过渡

  4. 开发建议

    • 组件复用
    • 样式模块化
    • 持续优化

  5. 测试

    • 响应式测试
    • 性能测试
    • 兼容性测试