How to use Tailwind CSS with Next.js Image ?
Integrating Tailwind CSS with Next.js enables you to style your application efficiently using utility-first CSS. When combined with the Next.js Image
component, you can create responsive and optimized images with ease and consistency.
In this article, we will learn how to use Tailwind CSS with Next.js Image.
Prerequisite:
Approach
First, we will import an Image Component from "next/image" then we will add the following required props src, alt, width, and height then we will use Tailwind CSS to style the Image like adding a shadow, making the borders rounded, add padding, etc,
Next.js Image Component is just like a <img/> tag but with better performance, automatic optimization, lazy loading, responsive image rendering, and good for SEO ranking the width and height props are required
Syntax:
import Image from "next/image";
<Image src="img url" alt="img name" width={100} height={100} />
Props:
- src: Source link of image file
- alt: A n alternative name for the image to display if the image is not rendered
- width: Width of the image
- height: Height of the image
Step to Use Tailwind CSS with Next.js
Step 1: I nitialize a next.js project using the below command.
npx create-next-app@latest
Step 2: Enter the project name and Select Yes for Tailwind CSS and others as per your need
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
Note: In the latest version of Next.js the installation of Tailwind CSS and Next.js is made Simpler
Project Structure:
Step 3: Enter the folder using the command
cd my_app
Step 4: Update the next.config.js file
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images : {
domains : ['media.geeksforgeeks.org']
}
}
module.exports = nextConfig
Example 1: In this example, image is loaded and styled using Tailwind CSS.
// Filename - 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>
);
}
Step 4: To run the project enter the following command
npm run dev
Then click on the link or enter localhost:3000 in your browser to open the project
Output:
Example 2: In this example, we will use Tailwind CSS animations to animate the images.
// 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>
);
}
To run the project enter the following command
npm run dev
Then click on the link or enter localhost:3000 in your browser to open the project
Output: