I have question regarding tags in tailwind css

[2div]

Dear community,

In my component i have more than h1 tags and more than image , when for example click on the hamburger icon i want the below image move down so that nav items displayed , i gave sm: mt-20 to image but this effect other image margins , how can i only target that image only ?

[wongjn]

Consider providing a Tailwind Play or a remotely-hosted git repository that reproduces your problem – it would be difficult to offer any solutions from the description you gave without any concrete code to look at.

[2div]

I am new to Tailwind , i will try to provide repo but i would like to give you a simple example:

Hello world

Hello world 2

*/

when i try to style the h1 in the section its effect the h1 in header , same issue happens with Image tag in NextJS

In i normal css , i can target h1 in header by using ' header h1' , how to do it in tailwind css ?

Thanks

[wongjn]

You'd want to look at adding classes as you'd like to the <h1> in the <header> like: https://play.tailwindcss.com/l1oNPvXpSM

[2div]

Yes i can add classes in normal css but I am using NextJS with Tailwind

[wongjn]

You can still add classes in NextJS. NextJS uses React, so you can follow the React syntax for adding classes:

In React, you specify a CSS class with className. It works like the class attribute in HTML:

<img className="avatar" />

So with <h1> elements, you'd do something like:

<h1 className="text-red-500">Foo</h1>

[2div]

Ok , Thank you for explaining