如何使用 Tailwind CSS 在 React 中设置 a href 链接的样式?
React 是一个用于构建 Web 应用程序的流行 JavaScript 库。创建 React 应用程序时，以美观的方式设置组件的样式非常重要。实现这一点的方法之一是使用 CSS 框架，例如 Tailwind CSS。
在本文中，我们将了解如何使用 Tailwind CSS 在 React 中设置 a href 链接的样式，以及 Tailwind CSS 中提供的不同方法或类。
先决条件
要在 React 应用程序中使用 Tailwind CSS，我们首先需要安装它。让我们看看创建新的 React 项目并安装 Tailwind CSS 的步骤。
步骤 1:创建一个新的 React 应用
要创建一个新的 React 应用，您可以使用 create-react-app 命令。打开终端或命令提示符并运行以下命令 -
npx create-react-app my-app
步骤 2:安装 Tailwind CSS
要在 React 应用中安装 Tailwind CSS，您需要在终端或命令提示符中运行以下命令 -
npm install tailwindcss
步骤 3:为 Tailwind CSS 创建配置文件
安装 Tailwind CSS 后，您需要创建一个配置文件来自定义默认设置。为此，请在终端或命令提示符中运行以下命令。
npx tailwindcss init
步骤 4:配置 PostCSS
Tailwind CSS 需要 PostCSS 来处理 CSS。要在 React 应用中配置 PostCSS，请在应用的根目录中创建一个名为 postcss.config.js 的新文件，并添加以下代码。
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};
步骤 5:在项目中导入 Tailwind CSS
要在您的 React 应用中使用 Tailwind CSS，您需要将其导入到 index.css 文件中。打开 src/index.css 文件，并在顶部添加以下行:
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
就这样!您已成功创建了一个新的 React 应用并安装了 Tailwind CSS。现在，您可以通过修改 tailwind.config.js 文件并在 React 组件中使用 Tailwind CSS 类来自定义样式。
我们也可以在 HTML 文件中使用 Tailwind CSS CDN，而无需创建 React 应用。因此，为了演示本文，我们将使用这种方法。
方法 1:使用 ClassName 属性
在 React 中，为 <a> 标签中的 href 链接设置样式的第一种方法是使用 Tailwind CSS 的 className 属性。在此方法中，我们借助 Tailwind CSS 创建一个 CSS 类，然后应用 <a> 标签的 className 属性。现在，在 className 属性中，我们定义 Tailwind 中使用的样式，例如，要将文本段落的字体大小设置为大，我们可以使用 text-lg 等。
语法
以下是定义如何在 React 中使用 Tailwind CSS 的 className 属性的语法 -
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;
在此语法中，我们使用 className 属性定义了 href 链接的样式。我们定义了一些样式，例如，使用"text-blue-500"类将文本设置为蓝色，使用"underline"类为链接添加下划线，并使用"font-bold"类将字体粗细设置为粗体。
示例
在此示例中，我们导入了使用 React 和 Tailwind CSS 所需的库和脚本。我们定义了一个名为"App"的 React 组件，它用于渲染组件的标题、段落和锚标记。
在这里，我们使用 className 属性和 Tailwind 类来设置 href 链接的背景颜色、文本颜色、字体粗细、内边距和边框半径。
<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>
方法 2:使用 Tailwind JIT
在 React 中，为 <a> 标签中的 href 链接设置样式的第二种方法是使用 Tailwind CSS JIT 或 Just-in-Time。Tailwind CSS 的 JIT 或 Just-in-Time 编译器用于在我们编写模板时按需生成样式，而不是在开发初期预先生成所有内容。
在此方法中，我们在 Tailwind CSS 中启用 JIT 模式，并使用 className 属性将类直接应用于 <a> 标签中的 href 属性。
语法
以下是在 React 中使用 Tailwind CSS JIT 的语法定义 -
<style>
/* 使用 JIT 方法的 href 样式 */
.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>
在此语法中，我们首先使用 @apply 指令定义了一个名为 .new-link 的自定义类，以应用 Tailwind CSS 类。之后，将此自定义类添加到 href 类属性中，以使用定义的样式。
示例
在此示例中，我们定义了一个名为 new-link 的 CSS 类，它使用 @apply 指令应用 Tailwind CSS 类。我们定义了一个名为"App"的 React 组件，它渲染组件的标题、段落和锚点标签。
在此方法中，渲染组件时，将使用 style 标签中定义的 new-link CSS 类设置锚点标签的样式。
<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>
/* 使用 JIT 方法的 href 样式 */
.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>
在本文中，我们了解了如何使用 Tailwind CSS 在 React 中设置 href 链接的样式。我们提供了两种不同的方法来设置 href 链接的样式。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
