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

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

Finally, Create some anchor tags inside your App.js 

Output: Run command to start the app

npm run start