Skip to content
Related Articles

Related Articles

How to style a href links in React using Tailwind CSS ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 16 Mar, 2022

In this article, we will learn how we can style a href link in Reactjs. Since we use Tailwind CSS, Tailwind CSS describes itself as the first applicable CSS framework. Rather than focusing on the performance of a style object, Tailwind focuses on how it should be displayed. This makes it easier for the developer to explore new styles and transform the structure. The first used CSS framework full of classes such as flex, pt-4, text-center, and rotate-90 can be designed to create any design, directly on your temples. 

Approach:

  1. Create a React-react-app
  2. Install Tailwind CSS
  3. Create some anchor tags in App.js  and give utility classes

Some utility classes for styling href links:

  • underline: its underline the text
  • hover:underline: Its underline when its hover
  • text-color-value: Its define color of text for example dark blue color text-blue-800

Create a React-react-app 

npx create-react-app my-app

cd my-app

Install tailwind CSS: Install tailwind CSS in your react app by running the following commands

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

Now you will see a file tailwind.config.js created, paste these codes in your tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS: Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Project Structure: Your Project directory will look like this.

Project-directory

Project-directory

Finally, Create some anchor tags inside your App.js 

App.js




<div className="absolute left-96 top-52">
      <a
        className="underline text-blue-600
                   hover:text-rose-900 
                   visited:text-rose-700"
        href="#">
        Click me
      </a>
      <br />
      <a
        href="#"
        className="underline hover:no-underline
                   text-blue-600 hover:text-blue-800 
                   visited:text-purple-600">
        Click me
      </a>
      <br />
      <a
        href="#"
        className="hover:underline text-blue-600
                   hover:text-green-800 
                   visited:text-green-700">
        Click me
      </a>
      <br />
 </div>


App.js




import './App.css';
function App() {
  return (
    <>
    <div className="absolute left-96 top-52">
      <a
        className="underline text-blue-600
                   hover:text-rose-900
                   visited:text-rose-700"
        href="#">
        Click me
      </a>
      <br />
      <a
        href="#"
        className="underline hover:no-underline
                   text-blue-600 hover:text-blue-800 
                   visited:text-purple-600">
        Click me
      </a>
      <br />
      <a
        href="#"
        className="hover:underline text-blue-600 
                   hover:text-green-800 
                   visited:text-green-700">
        Click me
      </a>
      <br />
    </div>
    </>
  );
}
  
export default App;


Output: Run command to start the app

npm run start


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!