Tailwindcss isn't applying to NextJS Link Tag-CodePudding

I have a nextjs frontend project with tailwindcss installed.

In the following example code

import Link from 'next/link'

return(
  <div>

     <Link className="text-sm hover:text-gray-600" href="#">Test Link styling</Link>

     <a className="text-sm hover:text-gray-600" href="#">Test Link styling</a> 

  </div>
)

When inspecting element on the page, the anchor tag gets styled by tailwindcss but the anchor tag from the Link tag doesn't get any styling.

Does anyone know how to fix this? Does it require changing the tailwindcss configs?

CodePudding user response：

Just put the a tag inside the Link tag without the href, leave href in Link and apply styles to the a tag. Like :

<Link className="text-sm hover:text-gray-600" href="#">
    <a className="text-sm hover:text-gray-600">Test Link styling</a>
</Link>

source: https://nextjs.org/docs/api-reference/next/link

Hope this helps and if you get a chance please upvote OnClick fires for another buttons click event

CodePudding user response：

Yes, that's because a Next.js Link doesn't accept a className property.

If you inspect the resulting HTML of your code, you will see that the resulting <a> tag will not have any of your classes on them.

For this to work properly you will need to put an anchor tag as a child to your Link:

<Link href="#">Test Link styling</Link>
    <a className="text-sm hover:text-gray-600">Test Link styling</a>
</Link>

Now next will not create an <a> tag for your Link, but instead, pass the href property to your existing <a> tag.