Use Tailwind CSS with Next.js Image Component

When working with Next.js, the Image component offers features like optimization, responsive sizing, and lazy loading for better performance. However, styling these images with Tailwind CSS while keeping the code clean and ensuring image optimization works can be challenging.

Our goal is to show the best ways to use Tailwind CSS with the Next.js Image component for better performance and design. We'll go through a few examples to show how to style and optimize images using Tailwind and Next.js.

Setting Up Tailwind CSS with Next.js

To get started, you first need to install Tailwind CSS in your Next.js project. Here's how to set it up:

Step 1: Install Node.js from here if it's not already installed.

Step 2: Run the following command to create a new Next.js project:

npx create-next-app@latest

You'll be prompted with questions to customize your setup. Select Yes for Tailwind CSS and No for others, based on your needs:

What is your project named? my-sample-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

Step 3: Once your Next.js app is set up, navigate into the project directory:

cd my-sample-app

Step 4: If Tailwind CSS isn't installed, run the following to create tailwind.config.js:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

In your tailwind.config.js, set the content paths like this:

module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Project Structure:

Step 5: Run the following command and open http://localhost:3000 in your browser:

npm run dev

Approaches to Combining Tailwind CSS with Next.js Image

Now that Tailwind CSS is set up in your Next.js project, let's look at styling and optimizing images with both Tailwind and the Next.js Image component. We'll go over simple styling, as well as more advanced techniques like making images responsive and adding hover effects.

Tailwind CSS with Next.js Image

In this example, we'll use the Next.js Image component together with Tailwind's utility classes for styling. This offers a simple yet effective way to display an image with visual enhancements like shadow effects, rounded corners, and transitions.

// pages/index.js
import Image from 'next/image';

export default function Home() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gradient-to-r 
           from-blue-200 via-purple-100 to-blue-200 py-10">
      {/* Image container with white background, shadow, and padding */}
        <div className="relative bg-white p-6 rounded-xl shadow-2xl 
            overflow-hidden w-[350px] h-[350px]">
            {/* Image with shadow, color accents, and hover effects */}
            <Image
                src="/images/logo.png" // Make sure the image is in the 'public/images' folder
                alt="Logo"
                width={350}
                height={350}
                className="object-cover rounded-xl border-8 border-white shadow-2xl 
                    transition-transform transform hover:scale-105 hover:shadow-2xl hover:border-indigo-500"
            />
            
            {/* Glowing border effect */}
            <div className="absolute inset-0 rounded-xl border-4 
                border-indigo-500 opacity-70 blur-xl"></div>
            
            {/* Optional: Add a glowing light effect */}
            <div className="absolute inset-0 bg-gradient-to-t from-transparent 
                to-indigo-400 opacity-30 rounded-xl"></div>
        </div>
    </div>
  );
}

Output:

Responsive Images with Tailwind CSS and Next.js

In this example, we use Tailwind CSS's responsive classes (sm:, md:, lg:) to change image sizes based on the screen size, making them look good on all devices. The Next.js Image component helps images load faster and adjust well on different screen sizes.

// pages/index.js
import Image from 'next/image';

export default function ResponsiveImageExample() {
  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100 py-10">
        <div className="max-w-screen-lg w-full p-4">
            <Image
                src="/images/logo.png" // Ensure the image is in the 'public/images' folder
                alt="Responsive Image Example"
                width={900} // Image's native width
                height={500} // Image's native height
                className="object-cover rounded-lg w-full max-w-full h-auto" // Responsive classes
            />
        </div>
    </div>
  );
}

Output

Advanced Image Styling with Tailwind CSS and Next.js

In this example, we use Tailwind CSS's hover effects, glowing borders, dynamic shadows, and image rotation to make the image more interactive. Tailwind's utility classes add style, while Next.js makes sure the images are optimized.

// pages/index.js
import Image from 'next/image';

export default function AdvancedImage() {
  return (
    <div className="min-h-min bg-gray-200 flex py-12">
      {/* Container for positioning the image in the top-right corner */}
        <div className="relative w-[200px] h-[300px]">
            {/* Image with glowing border and flip on hover */}
            <div className="relative w-full h-full group">
                <Image
                    src="/images/logo.png" // Path to the image in the 'public/images' folder
                    alt="Logo"
                    width={200}
                    height={300}
                    className="object-cover rounded-lg border-4 border-transparent shadow-2xl 
                        duration-500 ease-out group-hover:scale-105 group-hover:rotate-180"
                />
            
            {/* Glowing border */}
            <div className="absolute inset-0 rounded-lg border-4 border-transparent 
                    group-hover:border-indigo-500 group-hover:opacity-100 
                    transition-all duration-500"></div>

            {/* Glowing shadow effect */}
            <div className="absolute inset-0 rounded-xl shadow-2xl
                shadow-pink-700/50 group-hover:shadow-xl group-hover:shadow-indigo-500 
                    transition-all duration-500"></div>
            </div>
        </div>
    </div>
  );
}

Output

Interactive Image Grid with Hover Effects

This example shows how to create a grid of images that interact with hover effectslike scaling, rotation, and skewing. Each image will have its own gradient overlay that becomes more intense when hovered.

// pages/index.js
import Image from "next/image";

export default function Home() {
    return (
        <div className="flex flex-col p-6 m-6 justify-center items-center bg-gray-100">
          {/* Container for the image grid */}
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 max-w-6xl">
            
            {/* Image 1 */}
            <div className="group relative w-[250px] h-[250px]">
              <Image
                  src="/images/logo.png" // Your image path
                  width={250}
                  height={250}
                  className="object-cover rounded-xl shadow-xl group-hover:scale-110 group-hover:rotate-12 transition-all duration-300 ease-in-out"
                  alt="Image 1"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-transparent to-indigo-400 opacity-40 group-hover:opacity-80 transition-opacity duration-300"></div>
            </div>

            {/* Image 2 */}
            <div className="group relative w-[250px] h-[250px]">
              <Image
                  src="/images/logo.png" // Your image path
                  width={250}
                  height={250}
                  className="object-cover rounded-xl shadow-xl group-hover:scale-125 group-hover:rotate-6 transition-all duration-300 ease-in-out"
                  alt="Image 2"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-transparent to-pink-300 opacity-40 group-hover:opacity-80 transition-opacity duration-300"></div>
            </div>

            {/* Image 3 */}
            <div className="group relative w-[250px] h-[250px]">
              <Image
                  src="/images/logo.png" // Your image path
                  width={250}
                  height={250}
                  className="object-cover rounded-xl shadow-xl group-hover:skew-x-12 transition-all duration-300 ease-in-out"
                  alt="Image 3"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-transparent to-yellow-300 opacity-40 group-hover:opacity-80 transition-opacity duration-300"></div>
            </div>

            {/* Image 4 */}
            <div className="group relative w-[250px] h-[250px]">
              <Image
                  src="/images/logo.png" // Your image path
                  width={250}
                  height={250}
                  className="object-cover rounded-xl shadow-xl group-hover:skew-y-12 transition-all duration-300 ease-in-out"
                  alt="Image 4"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-transparent to-teal-300 opacity-40 group-hover:opacity-80 transition-opacity duration-300"></div>
            </div>

        </div>
      </div>
    );
}

Output