Next.js Tailwind CSS UI组件

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
 
const Header = () => {
  return (
    <header className="bg-white border-b border-gray-100">
      <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h1 className="text-3xl font-bold text-gray-900">
          <Link href="/">
            <a className="flex items-center gap-2">
              <Image src="/logo.png" alt="Logo" width={40} height={40} />
              {/* 这里的title是必要的，以便在没有图像时显示文本 */}
              <span className="sr-only">Home</span>
            </a>
          </Link>
        </h1>
      </div>
    </header>
  );
};
 
export default Header;

这个代码实例展示了如何在Next.js应用中使用Tailwind CSS创建一个带有Logo和品牌名称的页头组件。它使用了Next.js的Link组件来实现导航，并且使用了Image组件来处理图片的加载和显示。同时，它还使用了Tailwind CSS的实用程序类来创建页面布局和样式。