Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to style a href links in React using Tailwind CSS?
React is a popular JavaScript library used for building web applications. When creating a React application, it's important to style your components in an aesthetically pleasing way. One of the ways to achieve this is by using a CSS framework such as Tailwind CSS.
In this article, we will see how to style a href links in React using Tailwind CSS with different methods or classes available in Tailwind CSS.
Pre-requisite
To use the Tailwind CSS in a React application, we’ll first need to install it. Let’s see the steps for creating a new react project and installing tailwind CSS also.
Step 1: Create a New React App
To create a new React app, you can use the create-react-app command. Open your terminal or command prompt and run the following command −
npx create-react-app my-app
Step 2: Install Tailwind CSS
To install Tailwind CSS in your React app, you need to run the following command in your terminal or command prompt −
npm install tailwindcss
Step 3: Create a Configuration File for Tailwind CSS
After installing Tailwind CSS, you need to create a configuration file to customize the default settings. To do this, run the following command in your terminal or command prompt.
npx tailwindcss init
Step 4: Configure PostCSS
Tailwind CSS requires PostCSS to process CSS. To configure PostCSS in your React app, create a new file named postcss.config.js in the root directory of your app and add the following code
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};
Step 5: Import Tailwind CSS in your Project
To use Tailwind CSS in your React app, you need to import it in your index.css file. Open the src/index.css file and add the following line at the top −
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
That's it! You have successfully created a new React app and installed Tailwind CSS. You can now customize your styles by modifying the tailwind.config.js file and using Tailwind CSS classes in your React components.
We can also use the Tailwind CSS CDN in an HTML file, without creating a react application. So, for demonstrating this article, we’ll be using this approach.
Approach 1: Using ClassName Prop
The first approach of styling an href link that is available in the <a> tag in React is by using Tailwind CSS the className prop. In this approach, we create a CSS class with the help of Tailwind CSS and after which we apply the className prop of the <a> tag. Now, in the className prop, we define the styles used in a tailwind, for example, to define the font size of a text paragraph to large, we can use text-lg, etc.
Syntax
Below is the syntax that defines how to use the className prop in React using Tailwind CSS −
import React from 'react';
import './styles.css';
function App() {
return (
<div>
<a href="#" className="text-blue-500 underline font-bold">My Link</a>
</div>
);
}
export default App;
In this syntax, we are defining the styles to href link using the className prop. We have defined the styles such as ‘text-blue-500’ class to set the text as blue, ‘underline’ class to underline the link, and font-weight as bold using the class ‘font-bold’.
Example
In this example, we have imported the necessary libraries and scripts to use React and Tailwind CSS. We have defined a React component named "App" which renders some component's header, paragraph, and anchor tag.
Here, we have used the className prop using Tailwind classes to style and set the background color, text color, font weight, padding, and border-radius of the href link.
<html>
<head>
<title>Style href Links in React using Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div id="react"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component { render() { return (
<div className="p-4">
<h2 className="text-2xl font-bold mb-4">Welcome to Tutorialspoint </h2>
<p className="mb-4 text-green-700">
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
</p>
<a href="#" className="bg-green-500 bg-green-800 text-white font-bold py-2 px-4 rounded"> Search </a>
</div>
); } } ReactDOM.render(
<App />, document.getElementById('react') );
</script>
</body>
</html>
Approach 2: Using Tailwind JIT
The second approach to style an href link that is available in the <a> tag in React is by using Tailwind CSS JIT or Just-in-Time. The JIT or Just-in-Time compiler for Tailwind CSS is used in generating the styles on-demand as we author our templates instead of generating everything in advance at the initial time of development.
In this approach, we enable JIT mode in Tailwind CSS and in which we used the className prop to apply the classes directly to our href props in the <a> tag.
Syntax
Below is the syntax that defines how to use Tailwind CSS JIT in React −
<style>
/* styles for href using JIT method */
.new-link {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
</style>
/*In the <body> */
<a href="#" class="class-name">My Link</a>
In this syntax, we have first defined a custom class named .new-link using the @apply directive to apply the Tailwind CSS classes. After which, this custom class is added in the href class prop to use the defined styles.
Example
In this example, we have defined a CSS class called new-link that applies Tailwind CSS classes using the @apply directive. We have defined a React component named "App" which renders some component's header, paragraph, and anchor tag.
In this method, when the component is rendered, the anchor tag is styled using the new-link CSS class defined in the style tag.
<html>
<head>
<title>Style href Links in React using Tailwind CSS</title>
<link rel="stylesheet" href="https://cdn.tailwindcss.com/just-in-time/3.3.1/tailwind.min.css">
<style>
/* styles for href using JIT method */
.new-link {
@apply bg-blue-500 hover: bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
</style>
</head>
<body>
<div id="react"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class App extends React.Component { render() { return (
<div className="p-4">
<h2 className="text-2xl font-bold mb-4">Welcome to Tutorialspoint</h2>
<p className="mb-4 text-green-700">
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
</p>
<a href="#" class="new-link"> Search </a>
</div>
); } } ReactDOM.render(
<App />, document.getElementById('react') );
</script>
</body>
</html>
In this article, we have seen how to style a href link in React using Tailwind CSS. We have two different approaches to styling the href links.
989 Views
