I can't modify the postion of a image with tailwind-css and reactJS

Question

hello i got a problem whatever i try to move my picture it doesnt move i'm kinda new to typescript and react

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { SignupValidation } from "@/lib/validation";
import { z } from "zod";


return (
    <div>
        <Form {...form}>
          <div className="sm:w-420 flex-center flex-col">
            <img src="/assets/images/image2vector.svg" alt="logo" className="ml-100 sm:ml-0" />
          </div>

i tried to change the values but no success

this is what it gave me image.png

Answer 1

You have not used the margin-left property the right way. There is no ml-100 in the official documents of tailwind.

Try this one to set the margin-left:100px; for screens above small screens (above 640px) and for small screens (upto 640px) margin left will be 0. I guess you intend to do that from your code.

  <img src="/assets/images/image2vector.svg" alt="logo" className="block ml-[100px]" />