如何使用 Tailwind CSS 在 React 中設(shè)置 href 鏈接的樣式？-魔扣目錄

React 是一個(gè)流行的 JavaScript 庫(kù)，用于構(gòu)建 Web 應(yīng)用程序。創(chuàng)建 React 應(yīng)用程序時(shí)，以美觀的方式設(shè)計(jì)組件的樣式非常重要。實(shí)現(xiàn)此目的的方法之一是使用 CSS 框架，例如 Tailwind CSS。

在本文中，我們將了解如何使用 Tailwind CSS 以及 Tailwind CSS 中提供的不同方法或類在 React 中設(shè)置 href 鏈接的樣式。

先決條件

要在 React 應(yīng)用程序中使用 Tailwind CSS，我們首先需要安裝它。讓我們看看創(chuàng)建新的 React 項(xiàng)目并安裝 tailwind CSS 的步驟。

第 1 步：創(chuàng)建新的 React 應(yīng)用

要?jiǎng)?chuàng)建新的 React 應(yīng)用程序，您可以使用 create-react-app 命令。打開(kāi)終端或命令提示符并運(yùn)行以下命令 –

npx create-react-app my-app

登錄后復(fù)制

第 2 步：安裝 Tailwind CSS

要在 React 應(yīng)用程序中安裝 Tailwind CSS，您需要在終端或命令提示符中運(yùn)行以下命令 –

npm install tailwindcss

登錄后復(fù)制

第 3 步：為 Tailwind CSS 創(chuàng)建配置文件

安裝 Tailwind CSS 后，您需要?jiǎng)?chuàng)建一個(gè)配置文件來(lái)自定義默認(rèn)設(shè)置。為此，請(qǐng)?jiān)诮K端或命令提示符中運(yùn)行以下命令。

npx tailwindcss init

登錄后復(fù)制

第 4 步：配置 PostCSS

Tailwind CSS 需要 PostCSS 來(lái)處理 CSS。要在 React 應(yīng)用程序中配置 PostCSS，請(qǐng)?jiān)趹?yīng)用程序的根目錄中創(chuàng)建一個(gè)名為 postcss.config.js 的新文件，并添加以下代碼

module.exports = {
   plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
   ],
};

登錄后復(fù)制

第 5 步：在項(xiàng)目中導(dǎo)入 Tailwind CSS

要在 React 應(yīng)用程序中使用 Tailwind CSS，您需要將其導(dǎo)入到您的 index.css 文件中。打開(kāi) src/index.css 文件并在頂部添加以下行 –

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

登錄后復(fù)制

就是這樣！您已成功創(chuàng)建一個(gè)新的 React 應(yīng)用程序并安裝了 Tailwind CSS。現(xiàn)在，您可以通過(guò)修改 tailwind.config.js 文件并在 React 組件中使用 Tailwind CSS 類來(lái)自定義樣式。

我們還可以在 HTML 文件中使用 Tailwind CSS CDN，而無(wú)需創(chuàng)建 React 應(yīng)用程序。因此，為了演示本文，我們將使用這種方法。

方法 1：使用 ClassName 屬性

React 中標(biāo)記中可用的 href 鏈接樣式的第一種方法是使用 Tailwind CSS 的 className 屬性。在這種方法中，我們?cè)?Tailwind CSS 的幫助下創(chuàng)建一個(gè) CSS 類，然后應(yīng)用標(biāo)簽的 className 屬性。現(xiàn)在，在 className 屬性中，我們定義了 tailwind 中使用的樣式，例如，要將文本段落的字體大小定義為大，我們可以使用 text-lg,等等。

語(yǔ)法

下面是定義如何使用 Tailwind CSS 在 React 中使用 className 屬性的語(yǔ)法 –

import React from 'react';
import './styles.css';
function App() {
   return (
      <div>
         <a  className="text-blue-500 underline font-bold">My Link</a>
      </div>
   );
}
export default App;

登錄后復(fù)制

在此語(yǔ)法中，我們使用 className 屬性定義 href 鏈接的樣式。我們定義了諸如“text-blue-500”類將文本設(shè)置為藍(lán)色、“underline”類在鏈接下劃線以及使用“font-bold”類將 font-weight 設(shè)置為粗體等樣式。

示例

在此示例中，我們導(dǎo)入了使用 React 和 Tailwind CSS 所需的庫(kù)和腳本。我們定義了一個(gè)名為“App”的 React 組件，它呈現(xiàn)一些組件的標(biāo)題、段落和錨標(biāo)記。

在這里，我們使用 Tailwind 類的 className 屬性來(lái)設(shè)置 href 鏈接的背景顏色、文本顏色、字體粗細(xì)、填充和邊框半徑。

<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  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>

登錄后復(fù)制

方法 2：使用 Tailwind JIT

React 中標(biāo)記中可用的 href 鏈接樣式的第二種方法是使用 Tailwind CSS JIT 或 Just-in-Time。 Tailwind CSS 的 JIT 或即時(shí)編譯器用于在我們編寫模板時(shí)按需生成樣式，而不是在開(kāi)發(fā)初始時(shí)提前生成所有內(nèi)容。

在這種方法中，我們?cè)?Tailwind CSS 中啟用 JIT 模式，并使用 className 屬性將類直接應(yīng)用于標(biāo)記中的 href 屬性。

語(yǔ)法

下面是定義如何在 React 中使用 Tailwind CSS JIT 的語(yǔ)法 –

<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  class="class-name">My Link</a>

登錄后復(fù)制

在此語(yǔ)法中，我們首先使用 @apply 指令定義一個(gè)名為 .new-link 的自定義類來(lái)應(yīng)用 Tailwind CSS 類。之后，這個(gè)自定義類被添加到 href class 屬性中以使用定義的樣式。

示例

在此示例中，我們定義了一個(gè)名為 new-link 的 CSS 類，它使用 @apply 指令應(yīng)用 Tailwind CSS 類。我們定義了一個(gè)名為“App”的 React 組件，它呈現(xiàn)一些組件的標(biāo)題、段落和錨標(biāo)記。

在此方法中，當(dāng)呈現(xiàn)組件時(shí)，錨標(biāo)記將使用樣式標(biāo)記中定義的 new-link CSS 類設(shè)置樣式。

<html>
<head>
   <title>Style href Links in React using Tailwind CSS</title>
   <link rel="stylesheet" >
   <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  class="new-link"> Search </a>
         </div>
      ); } } ReactDOM.render(
      <App />, document.getElementById('react') );
   </script>
</body>
</html>

登錄后復(fù)制

在本文中，我們了解了如何使用 Tailwind CSS 在 React 中設(shè)置 href 鏈接的樣式。我們有兩種不同的方法來(lái)設(shè)置 href 鏈接的樣式。

以上就是如何使用 Tailwind CSS 在 React 中設(shè)置 href 鏈接的樣式？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！