Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tailwind CSS how to style a href links in React?

For some reason, tailwind seems to have removed the "blue" and "underlined" part of http links.

How do I get this functionality back?

For example, in my React code, i have:

return (
  <a href={v.url}>{v.alias}</a>
);

but this link shows up like normal font, and there's no underline. there's also no notion for browser to remember or hover different color on the link.

like image 923
David T. Avatar asked Sep 14 '20 11:09

David T.


People also ask

Can we use Tailwind CSS in React?

Getting Started: Create a React Project This means you end up with a working React environment within minutes. The above command creates a new folder named react-tailwind. Navigate to the folder and open it using your preferred text editor. Next, install Tailwind CSS and configure it to work with the React application.

What is tailwind CSS in react?

Tailwind CSS is a utility first CSS framework that allows developers to design custom web components without switching to a CSS file. In this tutorial, you will learn how to install Tailwind CSS in React and how you can use it to build a simple React page.

What is navlink in react router?

Well, it was built specifically for styling links you use with React-Router. NAVLINK is provided by REACT-ROUTER and NOT by STYLED-COMPONENTS. Well, that a whole lot of Well's in one paragraph. Anyway, let's jump into the code but beware there are some major changes here:

Is it possible to wrap a button in an anchor tag?

You can do this, but one annoyance of working with normal anchor tags is when you wrap a button in an anchor tag, the styling cascades into the text on the button, which is super annoying. Instead, I would suggest creating your own utility class that applies these styles instead of changing the styles for all <a> tags.

How to apply classes to elements in tailwind?

So the other answers correctly have pointed out that preflight and/or base will reset the components, but you can also use the @layer and @apply directives to apply classes to elements in bulk. @layer gives you a bucket to put things into, the ones currently available in Tailwind would be like base, components, and utilities.


Video Answer


5 Answers

Tailwind's Preflight functionality will remove all of the browsers' default stylings for most elements, giving you a clean basis to start from, to make cross-browser styling more consistent.

You need to re-add the styles you wish, for example:

className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"

or:

a {
   @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
}
like image 127
Luke Storry Avatar answered Oct 22 '22 20:10

Luke Storry


EDIT: It appears that this extra configuration is not needed with Tailwind 3 (at least as tested with 3.1.1). It may still be needed if you use Tailwind 2. See Patrik's comment below for an example.


As Luke correctly explained, Tailwind's Preflight removes all the browser defaults. You'll have to add the styling yourself:

className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"

However, you can't just use visited: with text-purple-600 without some configuration (at least with Tailwind 2. I'm not familiar with older versions). You'll also need to add the following to your Tailwind config at your project root:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textColor: ['visited'],
    }
  },
}

That way, Tailwind will make all the classes with visited: available for use with all the text color classes.

You can learn more about enabling extra variants in the Tailwind docs.

like image 7
ChrisCrossCrash Avatar answered Oct 22 '22 19:10

ChrisCrossCrash


So the other answers correctly have pointed out that preflight and/or base will reset the components, but you can also use the @layer and @apply directives to apply classes to elements in bulk.

@layer gives you a bucket to put things into, the ones currently available in Tailwind would be like base, components, and utilities.

For example, if you wanted to set all links to blue and underline, you could do the following:

@layer base {
  a {
    @apply text-blue underline
  }
}

The linked examples show how you could group the elements to make a meta-class for styling buttons consistently.

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}
like image 6
Chris Parsons Avatar answered Oct 22 '22 18:10

Chris Parsons


If you are using @apply note that the states (like hover) cannot be added in-line like you would pass to a class.

a {
   @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
}

They need to be broken out and matched to the css states like this:

a {
   @apply underline text-blue-600
}
a:hover {
   @apply text-blue-800
}
a:visited {
   @apply text-purple-600
}
like image 2
Daniel Avatar answered Oct 22 '22 19:10

Daniel


I have to disagree with others here who suggest re-adding the default anchor tag styling as a solution. You can do this, but one annoyance of working with normal anchor tags is when you wrap a button in an anchor tag, the styling cascades into the text on the button, which is super annoying.

Instead, I would suggest creating your own utility class that applies these styles instead of changing the styles for all <a> tags. For example:

.hyperlink {
  @apply text-blue-600 underline
}

.hyperlink:visited {
  @apply text-purple-600
}

Now, use that class explicitly when you want it rather than applying it no matter what.

<a class="hyperlink" href="/foo/bar">Text link</a>
<a href="foo/bar"><button>Style-Free Button!</button></a>
like image 2
jdevries3133 Avatar answered Oct 22 '22 19:10

jdevries3133