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?
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
I put a button inside it cause idk why it styles better than an <a> tag
<Link href={"/" + props.id}>
<button className="text-slate-900">Show Details</button>
</Link>
It gets the job done.
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="#">
<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.
you can use a a tag rather than a button tag.
To make it work properly Link needs to have passHref prop.
Use a tag of HTML inside Link tag of next and give href inside Link.
<Link href="/support">
<a className="rounded-lg p-3 duration-300 hover:bg-slate-200">
Support
</a>
</Link>
Related
I trying to navigate from a.class1 to div.class2. But the URL is changing when the link is called. So when trying to back page, it goes back to the current page on another section.
<a RouterLink="." [fragment]="'idDiv'" class="class1"></a>
...
<div class="class2" id="idDiv"></div>
Simple add 'skipLocationChange' to your anchor tag
<a routerLink="." [fragment]="'idDiv'" class="class1" skipLocationChange></a>
You can also refer to this one: Angular 2, handle anchor links with href='#'
I have a "migrated.html" page in root directory. How do I add that link to this CSS style button?
<button onclick="#" Migrated</button>
The above html code didn't work for me.
Here is the link to the code set:
https://codepen.io/prateek-vishwas/pen/Rwwpzjo
There are a few different ways to accomplish this.
But, from what I understand, it sounds like you just want an anchor <a> tag with a href attribute that is styled like this button.
You can simply just set the same class on the anchor tag that is on the button, so you should receive
<a href = "url-to-ur-page" class = glossy-button glossy-button--red>Migrated</a>
Why it has to be a button ? Why not use the normal "A" tag and style him like a button ?
<a href="migrated.html" class="glossy-button glossy-button--red">!!!Migrated!!!
</a>
Works in your codepen - ijust moved the migrated text inside the tag
This will work even without javascript.
Anyhow.the js to change the current url is
window.location = 'your url';
<button onclick="window.location='migrated.html';">
Migrated
</button>
which also work in your pen
How can I use an tag within that we can use from react-router?
For example,
<Link to='/some-path'>
Text
</Link>
Since Link is effectively an anchor tag too, HTML throws an error saying that an tag cannot be provided within another tag.
Any help would be appreciated.
So I'm working on a website
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
<p> - <a herf="Pages/PaintEverything.html">
Paint Everything
</a> - </p>
and the code here isn't working, none of the links work! I've coded a little program on my website, and this is supposed to take you to it, but it's not working, please help!
Use href instead of herf.
Paint Everything
HTML Tags
The correct way to include a link in your HTML is to use the href element (you mis-spelt it as herf.
Secondly, you cannot use href inside an img tag as it's not valid HTML. Instead, you should nest the img tag inside the link.
Update your code to this:
<a href="Pages/PaintEverything.html">
<img src="Images/PaintEverythingPreview.png">
</a>
<p>
Paint Everything
</p>
To validate (check) your HTML in the future, try the W3C Validator
error writing the attribute href.
Paint Everything
error in attribute href in img tag (not exists):
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
html tag reference: HTML tags list
Change herf to href and enclose the img in <a> tags to make the image a clickable link.
<img src="Images/PaintEverythingPreview.png">
Firstly you need to remove href from the image tag, since you cannot put a href in an <img> tag.
Secondly you need to check if the path/link to which you want to redirect to, is correct or not.
I have updated your code and let me know if this is what you are looking for.
<img src="Images/PaintEverythingPreview.png"><p> - Paint Everything - </p>
<h1><a id="Didn't-answer-your-question?">Didn't answer your question?<!--ID end--></h1></a><!--link end-->
Can I have an id element inside a href element, for the link text or does this not work, if so do people have an alternative?
There are several problems with your markup.
You don't close the <h1> tag properly. Your <a> id may technically work, but I wouldn't recommend it as an element ID.
The one that's giving you an issue though is the fact that you have an <a> tag nested inside another <a> tag. That is not valid markup.
Your inner tag does not need to be an anchor tag, change it to a span or something and it should work fine.
<a href="http://www.website.com">
<h1>
<span id="Didn't-answer-your-question??">Didn't answer your question?</span>
<!--ID end-->
</h1>
</a>
<!--link end-->
You didnt properly close the h1 tag but other than that it looks like it should work.
This is from the w3 website:
I just returned from vacation! Here's a
<A id="anchor-two">photo of my family at the lake.</A>.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.3