首頁 >web前端 >css教學 >如何使用 Tailwind CSS 在 React 中設定 href 連結的樣式？

如何使用 Tailwind CSS 在 React 中設定 href 連結的樣式？

PHPz轉載: 2023-09-12 10:29:14871瀏覽

如何使用 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 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="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 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="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中文網其他相關文章！

JavaScript css html postcss class JS href

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS3的新功能一覽：如何使用CSS3實現濾鏡效果下一篇：CSS3的新功能一覽：如何使用CSS3實現濾鏡效果

看更多