如何使用 Tailwind CSS 在 React 中设置 href 链接的样式？-css教程-PHP中文网

首页

web前端

css教程

如何使用 Tailwind CSS 在 React 中设置 href 链接的样式？

PHPz

Sep 12, 2023 am 10:29 AM

如何使用 Tailwind CSS 在 React 中设置 href 链接的样式？

React 是一个流行的 JavaScript 库，用于构建 Web 应用程序。创建 React 应用程序时，以美观的方式设计组件的样式非常重要。实现此目的的方法之一是使用 CSS 框架，例如 Tailwind CSS。

在本文中，我们将了解如何使用 Tailwind CSS 以及 Tailwind CSS 中提供的不同方法或类在 React 中设置 href 链接的样式。

先决条件

要在 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 中标记中可用的 href 链接样式的第一种方法是使用 Tailwind CSS 的 className 属性。在这种方法中，我们在 Tailwind CSS 的帮助下创建一个 CSS 类，然后应用标签的 className 属性。现在，在 className 属性中，我们定义了 tailwind 中使用的样式，例如，要将文本段落的字体大小定义为大，我们可以使用 text-lg, b>等等。

语法

下面是定义如何使用 Tailwind CSS 在 React 中使用 className 属性的语法 -

import React from 'react';
import './styles.css';
function App() {
   return (
      <div>
         <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" className="text-blue-500 underline font-bold">My Link</a>
      </div>
   );
}
export default App;

在此语法中，我们使用 className 属性定义 href 链接的样式。我们定义了诸如“text-blue-500”类将文本设置为蓝色、“underline”类在链接下划线以及使用“font-bold”类将 font-weight 设置为粗体等样式。

示例

在此示例中，我们导入了使用 React 和 Tailwind CSS 所需的库和脚本。我们定义了一个名为“App”的 React 组件，它呈现一些组件的标题、段落和锚标记。

在这里，我们使用 Tailwind 类的 className 属性来设置 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 id="Welcome-to-Tutorialspoint">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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 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 中标记中可用的 href 链接样式的第二种方法是使用 Tailwind CSS JIT 或 Just-in-Time。 Tailwind CSS 的 JIT 或即时编译器用于在我们编写模板时按需生成样式，而不是在开发初始时提前生成所有内容。

在这种方法中，我们在 Tailwind CSS 中启用 JIT 模式，并使用 className 属性将类直接应用于标记中的 href 属性。

语法

下面是定义如何在 React 中使用 Tailwind CSS JIT 的语法 -

<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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="class-name">My Link</a>

在此语法中，我们首先使用 @apply 指令定义一个名为 .new-link 的自定义类来应用 Tailwind CSS 类。之后，这个自定义类被添加到 href class 属性中以使用定义的样式。

示例

在此示例中，我们定义了一个名为 new-link 的 CSS 类，它使用 @apply 指令应用 Tailwind CSS 类。我们定义了一个名为“App”的 React 组件，它呈现一些组件的标题、段落和锚标记。

在此方法中，当呈现组件时，锚标记将使用样式标记中定义的 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>
      /* 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 id="Welcome-to-Tutorialspoint">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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="new-link"> Search </a>
         </div>
      ); } } ReactDOM.render(
      <App />, document.getElementById('react') );
   </script>
</body>
</html>

在本文中，我们了解了如何使用 Tailwind CSS 在 React 中设置 href 链接的样式。我们有两种不同的方法来设置 href 链接的样式。

以上是如何使用 Tailwind CSS 在 React 中设置 href 链接的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除