Tailwind CSS image absolute using The Next.js Image component

user_4576720 0
Viewed 1222

I am trying to use Next.js image component for an image that is absolute. https://play.tailwindcss.com/BGPOl7QECG

<div class="mt-12 sm:mt-16 lg:mt-0">
    <div class="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
       <img class="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none" src="https://via.placeholder.com/1920x1080.png" alt="Inbox user interface">
    </div>
</div>

I tried this

import Image from 'next/image'
....
<div className="mt-12 sm:mt-16 lg:mt-0">
  <div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
    <div className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none">
      <div className="relative">
        <Image src={image} alt={alt} layout="fill" />
      </div>
    </div>
  </div>
</div>

but the image is not positioned correctly similar to how it is when not using Next.js image component. How should I use the Image so it displays similar to the one without Image?

tailwind-css next.js reactjs
2 Answers

I think you can just append the string directly into the className like so

<Image className="w-full rounded-xl shadow-xl..." ... />
user_122994240

As we can read in official docs layout="fill" :

When fill, the image will stretch both width and height to the dimensions of the parent element, provided the parent element is relative. This is usually paired with the objectFit property. Ensure the parent element has position: relative in their stylesheet.

Here You have official example (demo the fill layout) and how it use ;-)

And Your code with my little improvements index.js (home page):

import Head from "next/head";
import Image from "next/image";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="relative bg-white pt-16 pb-32 overflow-hidden">
        <div className="relative">
          <div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
            <div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
              <div>
                <div className="mt-6">
                  <h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
                    Title
                  </h2>
                  <p className="mt-4 text-lg text-gray-500">
                    Semper curabitur ullamcorper posuere nunc sed. Ornare
                    iaculis bibendum malesuada faucibus lacinia porttitor.
                    Pulvinar laoreet sagittis viverra duis. In venenatis sem
                    arcu pretium pharetra at. Lectus viverra dui tellus ornare
                    pharetra.
                  </p>
                </div>
              </div>
            </div>
            <div className="mt-12 sm:mt-16 lg:mt-0">
              <div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
                <div className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none">
                  <div
                    className="relative"
                    style={{ width: "600px", height: "500px" }}
                  >
                    <Image
                      src="https://images.unsplash.com/photo-1636806663015-088d3d1ce2c8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"
                      layout="fill"
                      alt="happy new year"
                      objectPosition="center"
                      objectFit="cover"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

For these photos to be displayed you need to add this code in next.config.js

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ["images.unsplash.com"],
  },
};

Output:

enter image description here

Tested with "tailwindcss": "^3.0.5" "next": "12.0.7", "react": "17.0.2",

user_137059790
Related