Question 282260 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why "mb-3" class of Tailwindcss not working with next/link?

In this Next.js component, in the highlighted line "mb-3" class of Tailwindcss has no effect in the Y direction but if we use "m-3" it also does not have an effect in the y direction but has an effect on the X direction.

import Image from "next/image";
import Link from "next/link";

const Header = () => {
    return (
        <div className="bg-blue-200 w-1/5 h-screen fixed px-12 py-9">
            <Link href="/" className="mb-3">
                <Image
                    src="/logo.png"
                    alt="Twizlr"
                    width={100}
                    height={0}
                    priority
                    className="h-auto"
                />
            </Link>

            <nav className="flex items-center justify-center h-full bg-yellow-200"></nav>
        </div>
    );
};

export default Header;

I can’t get it why is this happening?

I don’t know what to do at all.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It worked if I also made the parent div display: flex. Thank you!

    import Image from "next/image";
import Link from "next/link";

const Header = () => {
    return (
        <div className="flex bg-blue-200 w-1/5 h-screen fixed px-12 py-9">
            <Link href="/" className="mb-3">
                <Image
                    src="/logo.png"
                    alt="Twizlr"
                    width={100}
                    height={0}
                    priority
                    className="h-auto"
                />
            </Link>

            <nav className="flex items-center justify-center h-full bg-yellow-200"></nav>
        </div>
    );
};

export default Header;

  2. 0

    The <Link> here would render an <a> element. <a> elements are inline elements by default. This means that vertical margin does not exhibit any behavior on them. To have the vertical margin work, consider overriding their default display: inline value. For example, you could apply display: inline-block as a close equivalent to display: inline.

    const Image = props => <img {...props}/>
const Link = props => <a {...props}/>

const Header = () => {
  return (
    <div className="bg-blue-200 w-1/5 h-screen fixed px-12 py-9">
      <Link href="/" className="mb-3 inline-block">
        <Image
            src="https://picsum.photos/100/100"
            alt="Twizlr"
            width={100}
            height={0}
            priority
            className="h-auto"
        />
      </Link>
      <nav className="flex items-center justify-center h-full bg-yellow-200"></nav>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('app')).render(<Header/>);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div id="app"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search