极客教程如何在Next.js图像中使用Tailwind CSS
在本文中，我们将学习如何在Next.js图像中使用Tailwind CSS。Tailwind是一种流行的实用型CSS框架，简化了创建响应式Web设计的过程。它提供了一套预定义的CSS类，可用于样式化HTML元素。
Next.js 图像组件类似于< img/ >标签，但具有更好的性能、自动优化、懒加载、响应式图像渲染和有助于SEO排名的特性，需要设置宽度和高度属性。
先决条件
语法
import Image from "next/image";
<Image src="img url" alt="img name" width={100} height={100} / **>**
属性：
- src: 图像文件的源链接
- alt: 图像的替代名称，如果图像未呈现，则显示该名称
- width: 图像的宽度
- height: 图像的高度
创建一个Next.js项目并安装Tailwind CSS
步骤1：输入以下命令来创建Next.js项目
npx create-next-app@latest
步骤2： 输入项目名称，并根据您的需求选择Tailwind CSS和其他选项
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
注意： 在最新版本的Next.js中，安装Tailwind CSS和Next.js变得更简单了。
项目结构：
步骤3： 使用命令进入文件夹
cd my_app
方法
首先，我们将从 “next/image” 中导入一个 Image 组件，然后我们将添加以下必需的 props：src、alt、width 和 height。然后，我们将使用 Tailwind CSS 来为图片添加样式，例如添加阴影、使边框圆角、添加内边距等等。
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images : {
domains : ['media.geeksforgeeks.org']
}
}
module.exports = nextConfig
示例1: 在这种方法中，使用Tailwind CSS加载并样式化了一个图像。
- src/pages.js
import Image from "next/image";
export default function Home() {
return (
<div className="flex flex-col p-6 m-6
justify-center items-center">
<h1 className="text-2xl text-center
font-semibold text-green-600">
Geeks for Geeks Tailwind
Next.js Image
</h1>
<div className="p-10">
<Image
src=
{"https://media.geeksforgeeks.org/wp-content/uploads/20230722121133/GFG.png"}
width={300}
height={300}
className="shadow-2xl bg-white
rounded-xl p-4 shadow-red-800"
/>
</div>
</div>
);
}
步骤4： 要运行项目，请输入以下命令
npm run dev
然后点击链接或在浏览器中输入 localhost:3000 来打开项目
输出：
示例2： 在这种方法中，我们将使用Tailwind CSS动画来给图片添加动画效果
- next.config.js
//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images : {
domains : ['media.geeksforgeeks.org']
}
}
module.exports = nextConfig
- src/pages.js
import Image from "next/image";
export default function Home() {
return (
<div className="flex flex-col p-6
m-6 justify-center
items-center">
<h1 className="text-2xl text-center
font-semibold text-green-600">
Geeks for Geeks Tailwind Next.js Image
</h1>
<div className="p-10 flex flex-row">
<Image
src=
{"https://media.geeksforgeeks.org/wp-content/uploads/20230722121133/GFG.png"}
width={300}
height={300}
className="shadow-2xl bg-red rounded-xl
p-4 m-4 shadow-rose-400
hover:rotate-45 duration-150
ease-in-out "
/>
<Image
src=
{"https://media.geeksforgeeks.org/wp-content/uploads/20230722121133/GFG.png"}
width={300}
height={300}
className="shadow-2xl bg-red rounded-xl
p-4 m-4 shadow-cyan-400
hover:scale-125
duration-150 ease-in-out "
/>
<Image
src=
{"https://media.geeksforgeeks.org/wp-content/uploads/20230722121133/GFG.png"}
width={300}
height={300}
className="shadow-2xl bg-red
rounded-xl p-4 m-4
shadow-green-400
hover:skew-x-12
duration-150 ease-in-out "
/>
<Image
src=
{"https://media.geeksforgeeks.org/wp-content/uploads/20230722121133/GFG.png"}
width={300}
height={300}
className="shadow-2xl bg-red rounded-xl
p-4 m-4 shadow-pink-400
hover:skew-y-12 duration-150
ease-in-out "
/>
</div>
</div>
);
}
运行项目，请输入以下命令
npm run dev
然后点击链接或在浏览器中输入 localhost:3000 打开项目。
输出：
