Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to style a href links in React using Tailwind CSS?
React is a popular JavaScript library for building user interfaces. When creating React applications, styling components is crucial for creating visually appealing interfaces. Tailwind CSS is a utility-first CSS framework that provides pre-built classes for rapid UI development.
In this article, we will learn how to style anchor tags (href links) in React using Tailwind CSS with different approaches and utility classes.
Installation Requirements: To follow along with the examples, you need to include Tailwind CSS in your HTML file. We'll be using the CDN approach for simplicity in our demonstrations.
Syntax
<a href="#" className="tailwind-utility-classes">Link Text</a>
Method 1: Using Direct Utility Classes
The most straightforward approach is applying Tailwind CSS utility classes directly to the anchor tag using the className prop. This method allows you to style links inline without creating separate CSS classes.
Example: Basic Link Styling
This example demonstrates how to create a styled button-like link using Tailwind utility classes
<!DOCTYPE html>
<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-6">
<h2 className="text-2xl font-bold mb-4">Welcome to Tutorialspoint</h2>
<p className="mb-4 text-gray-700">
Learn programming languages and web development with our comprehensive tutorials.
</p>
<a href="#" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
Get Started
</a>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('react'));
</script>
</body>
</html>
A page displays with a heading "Welcome to Tutorialspoint", descriptive text, and a blue button-style link that changes to darker blue on hover. The button has white text, bold font, padding, and rounded corners.
Method 2: Using CSS Classes with @apply Directive
This approach involves creating custom CSS classes using Tailwind's @apply directive. This method is useful when you want to reuse styles across multiple links or components.
Example: Custom Link Class
Here we define a custom CSS class that combines multiple Tailwind utilities
<!DOCTYPE html>
<html>
<head>
<title>Style href Links in React using Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.custom-link {
@apply text-indigo-600 hover:text-indigo-800 underline font-medium transition-colors duration-200;
}
.button-link {
@apply bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-all duration-300;
}
</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-6 max-w-md mx-auto">
<h2 className="text-2xl font-bold mb-4">Link Styling Examples</h2>
<div className="space-y-4">
<p>Visit our <a href="#" className="custom-link">documentation</a> for more details.</p>
<div>
<a href="#" className="button-link">Download Now</a>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('react'));
</script>
</body>
</html>
A centered container displays with two styled links: an inline indigo-colored underlined link within text that darkens on hover, and a green button-style link with shadow effects that enhances on hover. Both links include smooth transitions.
Common Tailwind Link Styles
| Style Type | Tailwind Classes | Description |
|---|---|---|
| Basic Link | text-blue-600 hover:text-blue-800 |
Simple colored link with hover effect |
| Underlined | underline hover:no-underline |
Link with underline that disappears on hover |
| Button Style | bg-blue-500 text-white px-4 py-2 rounded |
Button-like appearance with background |
| Outlined | border border-blue-500 text-blue-500 px-4 py-2 |
Outlined button style |
Conclusion
Tailwind CSS provides excellent utility classes for styling anchor tags in React applications. You can either apply utilities directly via className or create reusable custom classes with the @apply directive for consistent styling across your application.
1K+ Views
