var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),w=(a,n)=>{for(var s in n)t(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of N(n))!k.call(a,l)&&l!==s&&t(a,l,{get:()=>n[l],enumerable:!(c=h(n,l))||c.enumerable});return a};var y=(a,n,s)=>(s=a!=null?m(u(a)):{},o(n||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),f=a=>o(t({},"__esModule",{value:!0}),a);var r=g((C,i)=>{i.exports=_jsx_runtime});var x={};w(x,{default:()=>v});var e=y(r());function d(a){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",pre:"pre",code:"code",ul:"ul",li:"li"},a.components),{Image:s,Ads:c}=n;return c||p("Ads",!0),s||p("Image",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{id:"introduction",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,e.jsx)(n.p,{children:"One of the most important aspects of a website is its images. Images can now become more interactive with the use of CSS transitions. So, in this tutorial, we'll learn how to make images more interactive using the Tailwind CSS."}),` `,(0,e.jsx)(n.p,{children:"Tailwind CSS is a utility-first CSS framework packed with classes. Tailwind CSS does not come with components, unlike other CSS frameworks such as Bootstrap or Chakra UI. Tailwind CSS, on the other hand, works by giving you a set of classes. With these classes, you can quickly create your own designs."}),` `,(0,e.jsx)(s,{alt:"Meme about tailwind css",src:"/v1652328849/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/Meme_a7vr7s.jpg",width:"577",height:"430"}),` `,(0,e.jsxs)(n.h2,{id:"getting-started",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#getting-started",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Getting Started"]}),` `,(0,e.jsx)(n.p,{children:"If you don't already have one, begin by creating a new Next.js project. Using the Create Next App is the most usual method."}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash code-highlight",children:[(0,e.jsx)(n.span,{className:"code-line",children:`$ npx create-next-app my-project `}),(0,e.jsxs)(n.span,{className:"code-line",children:["$ ",(0,e.jsx)(n.span,{className:"token builtin class-name",children:"cd"}),` my-project `]})]})}),` `,(0,e.jsx)(n.p,{children:"After the project is created, we will move to the tailwind installation."}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:["$ ",(0,e.jsx)(n.span,{className:"token function",children:"npm"})," ",(0,e.jsx)(n.span,{className:"token function",children:"install"})," ",(0,e.jsx)(n.span,{className:"token parameter variable",children:"-D"}),` tailwindcss postcss autoprefixer `]}),(0,e.jsxs)(n.span,{className:"code-line",children:["$ npx tailwindcss init ",(0,e.jsx)(n.span,{className:"token parameter variable",children:"-p"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["Add the paths to all of your template files in ",(0,e.jsx)(n.code,{children:"tailwind.config.js"})," file."]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:["module",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"exports"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"content"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:"'./pages/**/*.{js,ts,jsx,tsx}'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:"'./components/**/*.{js,ts,jsx,tsx}'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"theme"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"extend"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"plugins"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["Add the @tailwind directives to ",(0,e.jsx)(n.code,{children:"./styles/globals.css"})," file."]}),` `,(0,e.jsx)(n.pre,{className:"language-css",children:(0,e.jsxs)(n.code,{className:"language-css code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token atrule",children:[(0,e.jsx)(n.span,{className:"token rule",children:"@tailwind"})," base",(0,e.jsx)(n.span,{className:"token punctuation",children:";"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token atrule",children:[(0,e.jsx)(n.span,{className:"token rule",children:"@tailwind"})," components",(0,e.jsx)(n.span,{className:"token punctuation",children:";"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token atrule",children:[(0,e.jsx)(n.span,{className:"token rule",children:"@tailwind"})," utilities",(0,e.jsx)(n.span,{className:"token punctuation",children:";"})]}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"After all we can start running project with:"}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:["$ ",(0,e.jsx)(n.span,{className:"token function",children:"yarn"}),` dev `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:"# or"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:["$ ",(0,e.jsx)(n.span,{className:"token function",children:"npm"}),` run dev `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,e.jsxs)(n.h2,{id:"how-tailwind-css-transitions-work",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#how-tailwind-css-transitions-work",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"How Tailwind CSS Transitions Work"]}),` `,(0,e.jsx)(n.p,{children:"For example, we can make a button with a hover transition that changes the color of its background."}),` `,(0,e.jsx)(n.pre,{className:"language-jsx",children:(0,e.jsxs)(n.code,{className:"language-jsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"rounded-full bg-teal-600 px-6 py-3 font-medium text-white transition duration-300 hover:bg-indigo-500",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token plain-text",children:` Hello Universe! `})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsx)(s,{alt:"How tailwind css transitions work",src:"/v1652327445/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/How_Tailwind_CSS_Transitions_Work_bzg7zq.gif",width:"829",height:"335"}),` `,(0,e.jsxs)(n.p,{children:["it can be seen that with the ",(0,e.jsx)(n.code,{children:"transition"})," class we can change the background color from ",(0,e.jsx)(n.code,{children:"bg-teal-600"})," to ",(0,e.jsx)(n.code,{children:"bg-indigo-500"})," with a duration of 300ms ",(0,e.jsx)(n.code,{children:"duration-300"}),"."]}),` `,(0,e.jsx)(n.p,{children:"The transition stuff, which includes transition properties, transition duration, transition timing function, transition delay, and animation, can be found in the Tailwind CSS documentation. Here are all of the explanations for that:"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://tailwindcss.com/docs/transition-property",children:"Transition Property - Tailwind CSS"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://tailwindcss.com/docs/transition-duration",children:"Transition Duration - Tailwind CSS"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://tailwindcss.com/docs/transition-timing-function",children:"Transition Timing Function - Tailwind CSS"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://tailwindcss.com/docs/transition-delay",children:"Transition Delay - Tailwind CSS"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://tailwindcss.com/docs/animation",children:"Animation - Tailwind CSS"})}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"understanding-nextimage-onloadingcomplete-callback",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#understanding-nextimage-onloadingcomplete-callback",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Understanding next/image ",(0,e.jsx)(n.code,{children:"onLoadingComplete"})," callback"]}),` `,(0,e.jsx)(n.p,{children:"onLoadingComplete is a callback function that is invoked once the image is completely loaded and the placeholder has been removed. This means that we can add a transition before the image is fully loaded."}),` `,(0,e.jsxs)(n.p,{children:["To see how the ",(0,e.jsx)(n.code,{children:"onLoadingComplete"})," callback works, we must create a state that contains the boolean ",(0,e.jsx)(n.code,{children:"false"}),"."]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextImage"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/image'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," src",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"isReady",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setIsReady",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextImage"})," objectFit",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'cover'"})," src",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"src",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," layout",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'responsive'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"Next, we create a function onLoadCallback which will change the state of isReady to true."}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextImage"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/image'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," src",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"isReady",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setIsReady",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"onLoadCallback"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setIsReady"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextImage"})," objectFit",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'cover'"})," src",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"src",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," layout",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'responsive'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["After that, we can call the ",(0,e.jsx)(n.code,{children:"onLoadCallback"})," function in the ",(0,e.jsx)(n.code,{children:"onLoadingComplete"})," props, which will trigger the event parameter which contains the loaded img."]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextImage"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/image'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," src",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"isReady",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setIsReady",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"onLoadCallback"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setIsReady"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextImage"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" objectFit",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'cover'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" src",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"src",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" onLoadingComplete",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"onLoadCallback",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" layout",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'responsive'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(c,{}),` `,(0,e.jsxs)(n.h2,{id:"create-custom-images-components",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#create-custom-images-components",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Create Custom Images Components"]}),` `,(0,e.jsxs)(n.p,{children:["Now that we know how to use the ",(0,e.jsx)(n.code,{children:"onLoadingComplete"})," callback, we can create custom image components by creating a components folder and putting the ",(0,e.jsx)(n.code,{children:"image.js"})," file inside it."]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash code-highlight",children:[(0,e.jsx)(n.span,{className:"code-line",children:`\u251C\u2500\u2500 README.md `}),(0,e.jsx)(n.span,{className:"code-line highlight-line",children:`\u251C\u2500\u2500 components `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u2514\u2500\u2500 image.js `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u251C\u2500\u2500 next.config.js `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u251C\u2500\u2500 package-lock.json `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u251C\u2500\u2500 package.json `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u251C\u2500\u2500 pages `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u251C\u2500\u2500 _app.js `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u251C\u2500\u2500 index.js `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u251C\u2500\u2500 postcss.config.js `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u251C\u2500\u2500 public `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u251C\u2500\u2500 favicon.ico `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u2514\u2500\u2500 vercel.svg `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u251C\u2500\u2500 styles `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u251C\u2500\u2500 Home.module.css `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2502 \u2514\u2500\u2500 globals.css `}),(0,e.jsx)(n.span,{className:"code-line",children:`\u2514\u2500\u2500 tailwind.config.js `})]})}),` `,(0,e.jsxs)(n.p,{children:["Then, in the ",(0,e.jsx)(n.code,{children:"image.js"})," file, add the following code:"]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextImage"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/image'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," src",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"isReady",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setIsReady",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"onLoadCallback"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setIsReady"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextImage"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" objectFit",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'cover'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" src",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"src",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" onLoadingComplete",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"onLoadCallback",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" layout",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'responsive'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.h2,{id:"apply-a-blurred-effect-to-images",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#apply-a-blurred-effect-to-images",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Apply a Blurred Effect to Images"]}),` `,(0,e.jsxs)(n.p,{children:["We use the blur effect to apply an effect to custom images that we created before. We can do this by adding the blur class with ",(0,e.jsx)(n.code,{children:"blur-2xl"})," to the image when ",(0,e.jsx)(n.code,{children:"isReady"})," is ",(0,e.jsx)(n.code,{children:"false"})," and remove it when ",(0,e.jsx)(n.code,{children:"isReady"})," is ",(0,e.jsx)(n.code,{children:"true"})," with ",(0,e.jsx)(n.code,{children:"blur-0"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["To make transition more interactive, we can add scale class with ",(0,e.jsx)(n.code,{children:"scale-120"})," to the image when ",(0,e.jsx)(n.code,{children:"isReady"})," is ",(0,e.jsx)(n.code,{children:"false"})," and ",(0,e.jsx)(n.code,{children:"scale-100"})," when ",(0,e.jsx)(n.code,{children:"isReady"})," is ",(0,e.jsx)(n.code,{children:"true"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["We also add the ",(0,e.jsx)(n.code,{children:"transition"})," and ",(0,e.jsx)(n.code,{children:"duration-1000"})," class to the image to apply the transition effect."]}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"NextImage"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" objectFit",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'cover'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" src",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"src",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"bg-gray-400 transition duration-1000 "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),` `]})]})]}),(0,e.jsx)(n.span,{className:"code-line highlight-line",children:(0,e.jsx)(n.span,{className:"token template-string",children:(0,e.jsxs)(n.span,{className:"token interpolation",children:[" isReady ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'scale-100 bg-gray-400 blur-0'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'scale-120 blur-2xl'"}),` `]})})}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsxs)(n.span,{className:"token interpolation",children:[" ",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"props",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" onLoadingComplete",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"onLoadCallback",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" layout",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'responsive'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"After That, we can import images components that we created before and use them in all images."}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../components/image'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Test"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"main className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'flex h-screen w-screen items-center justify-center'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'w-1/4'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})," src",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"YOURIMAGESRC"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," width",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"300"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," height",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"300"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"main",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Test"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(s,{alt:"use component on all images",src:"/v1652331620/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/use_components_in_all_images_lrnl5h.gif",width:"600",height:"319"}),` `,(0,e.jsxs)(n.h2,{id:"create-a-rick-and-morty-character-list-with-a-custom-image",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#create-a-rick-and-morty-character-list-with-a-custom-image",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Create a Rick and Morty Character List With a Custom Image"]}),` `,(0,e.jsx)(n.p,{children:"To apply to the project, we only need to import the components that were created earlier."}),` `,(0,e.jsx)(n.p,{children:"For example, we will implement the Rick and Morty API."}),` `,(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../components/image'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," res ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"fetch"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'https://rickandmortyapi.com/api/character/'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," content ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," res",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"json"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"props"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" content",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Home"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," content ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'bg-gray-200 p-5 sm:p-16 lg:p-32'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'grid grid-cols-1 gap-5 sm:grid-cols-2 md:gap-10 lg:grid-cols-3 xl:grid-cols-5'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"content",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"results"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"character"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," id",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," name",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," image",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," status",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," type",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," gender ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," character",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div key",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"id",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'rounded-lg bg-white'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'overflow-hidden rounded-t-lg'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Image"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" src",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"image",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" width",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"300"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" height",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"300"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" layout",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'responsive'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'mx-4 my-4'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"h2 className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'text-xl font-bold text-gray-900'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"name",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"h2",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"p className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'text-md text-gray-600'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Status"})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"status",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"p",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"p className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'text-md text-gray-600'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Gender"})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"gender",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"p",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Home"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"Here is the result of the implementation of the Rick and Morty Character List with a Custom Image."}),` `,(0,e.jsx)(s,{alt:"implementation of the Rick and Morty Character List",src:"/v1652332661/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/implementation_of_the_Rick_and_Morty_Character_List_rwb1sw.gif",width:"600",height:"319"}),` `,(0,e.jsxs)(n.h2,{id:"conclusion",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#conclusion",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,e.jsx)(n.p,{children:"Tailwind CSS can be used to provide a transition effect to custom images, making them more interactive."}),` `,(0,e.jsxs)(n.p,{children:["The code of this project lives at : ",(0,e.jsx)(n.a,{href:"https://github.com/jagadyudha/custom-image-transition-in-nextjs-with-tailwind-css",children:"https://github.com/jagadyudha/custom-image-transition-in-nextjs-with-tailwind-css"})]})]})}function b(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(d,a)})):d(a)}var v=b;function p(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(x);})(); ;return Component;