But I am not able to make the image smaller[1]. Also, I rounded the image on the home by editing cover-image.js2 but it is not effective on the post. Would you please help me to find where I should fix ?
You can edit how the image looks by adding CSS styles to your image.
You can create a CSS file, import it, and use it by specifying a class on the <Image> component through the className attribute.
You can read a bit more on how to do this here: Adding a Stylesheet | Create React App
For the rounded corners you can use border-radius and for the size you can alter the width and height.
I found that with the DatoCMS image component you have to apply sizing to the inner actual img element (also applies to other image wrapping components like <ReactSVG>). The className on applies to the outer container.
With classic className Tailwind you cannot do that component-local. You have to declare a global class for the image (where you can then use @apply with img element), import the CSS file in _app and apply this global class to className of the <Image> of DatoCMS. (as @m.finamor wrote)
Use Tailwind with a CSS-in-JS framework via twin.macro. I prefer that option as I like to have components with 100% locality independent of external assets., I use it with Stitches, There you have a tw and css prop and can do something like this:
const image = (
<Image
data={{
...responsiveImage,
alt: `Cover Image for ${title}`,
}}
//Tailwind classes for outer responsive image container element
tw="rounded-3xl"
css={{
img: {
// what you want apply directly to the inner img element.
...slug ? tw`rounded-3xl hover:shadow-medium transition-shadow duration-200` : {},
},
}}
/>
);
So it’s essentially doing an @apply scoped to a React component subtree. I needed this capability tons of times, This is the most common styling issue with Tailwind and such external components I believe.
A great article that brought me on this path is this: Why I Love Tailwind. There is some learning curve with this but it really will pay off.