Bagaimana untuk menggayakan pautan href dalam React menggunakan Tailwind CSS?-tutorial css-php.cn

Jadual Kandungan

Prasyarat

Langkah 1: Buat aplikasi React baharu

Langkah 2: Pasang Tailwind CSS

Langkah 3: Buat fail konfigurasi untuk Tailwind CSS

Langkah 4: Konfigurasikan PostCSS

Langkah 5: Import Tailwind CSS ke dalam projek

Kaedah 1: Gunakan atribut ClassName

Rumah

hujung hadapan web

tutorial css

Bagaimana untuk menggayakan pautan href dalam React menggunakan Tailwind CSS?

Sep 12, 2023 am 10:29 AM

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

React ialah perpustakaan JavaScript yang popular untuk membina aplikasi web. Apabila membuat aplikasi React, penting untuk menggayakan komponen anda dengan cara yang cantik. Salah satu cara untuk mencapai ini ialah menggunakan rangka kerja CSS seperti Tailwind CSS.

Dalam artikel ini, kita akan belajar cara menggayakan pautan href dalam React menggunakan Tailwind CSS dan kaedah atau kelas berbeza yang tersedia dalam Tailwind CSS.

Prasyarat

Untuk menggunakan Tailwind CSS dalam aplikasi React, kita perlu memasangnya terlebih dahulu. Mari lihat langkah-langkah untuk mencipta projek React baharu dan memasang CSS tailwind.

Langkah 1: Buat aplikasi React baharu

Untuk mencipta aplikasi React baharu, anda boleh menggunakan arahan create-react-app. Buka terminal atau command prompt dan jalankan arahan berikut -

1	`npx create-react-app my-app`

Salin selepas log masuk

Langkah 2: Pasang Tailwind CSS

Untuk memasang Tailwind CSS dalam aplikasi React anda, anda perlu menjalankan arahan berikut dalam terminal atau command prompt -

1	`npm install tailwindcss`

Salin selepas log masuk

Langkah 3: Buat fail konfigurasi untuk Tailwind CSS

Selepas memasang Tailwind CSS, anda perlu mencipta fail konfigurasi untuk menyesuaikan tetapan lalai. Untuk melakukan ini, jalankan arahan berikut dalam terminal atau command prompt.

1	`npx tailwindcss init`

Salin selepas log masuk

Langkah 4: Konfigurasikan PostCSS

Tailwind CSS memerlukan PostCSS untuk mengendalikan CSS. Untuk mengkonfigurasi PostCSS dalam aplikasi React anda, buat fail baharu yang dipanggil postcss.config.js dalam direktori root aplikasi anda dan tambah kod berikut

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

Salin selepas log masuk

Langkah 5: Import Tailwind CSS ke dalam projek

Untuk menggunakan Tailwind CSS dalam aplikasi React, anda perlu mengimportnya ke dalam fail index.css anda. Buka fail src/index.css dan tambah baris berikut di bahagian atas -

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

Salin selepas log masuk

Itu sahaja! Anda telah berjaya mencipta aplikasi React baharu dan memasang Tailwind CSS. Anda kini boleh menyesuaikan penggayaan dengan mengubah suai fail tailwind.config.js dan menggunakan kelas CSS Tailwind dalam komponen React anda.

Kami juga boleh menggunakan Tailwind CSS CDN dalam fail HTML tanpa membuat aplikasi React. Oleh itu, untuk tujuan menunjukkan artikel ini, kami akan menggunakan kaedah ini.

Kaedah 1: Gunakan atribut ClassName

Cara pertama untuk menggayakan pautan href yang tersedia dalam teg

dalam React ialah menggunakan sifat className bagi Tailwind CSS. Dalam kaedah ini, kami mencipta kelas CSS dengan bantuan Tailwind CSS dan kemudian menggunakan atribut className bagi teg . Sekarang, dalam atribut className, kita mentakrifkan gaya yang digunakan dalam tailwind, sebagai contoh, untuk menentukan saiz fon perenggan teks sebagai besar, kita boleh menggunakan text-lg,# 🎜 🎜 #Tunggu.

tatabahasa

Berikut ialah sintaks yang mentakrifkan cara menggunakan atribut className dalam React menggunakan Tailwind CSS -

1
2
3
4
5
6
7
8
9
10
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;
Salin selepas log masuk

Dalam sintaks ini, kami menggunakan atribut className untuk mentakrifkan gaya pautan href. Kami menentukan gaya seperti kelas "text-blue-500" untuk menetapkan teks kepada biru, kelas "garis bawah" untuk menggariskan pautan dan kelas "font-bold" untuk menetapkan berat fon kepada tebal.

Contoh

Dalam contoh ini, kami mengimport perpustakaan dan skrip yang diperlukan untuk menggunakan React dan Tailwind CSS. Kami menentukan komponen React yang dipanggil "Apl" yang memaparkan tajuk, perenggan dan teg sauh beberapa komponen.

Di sini, kami menggunakan atribut className kelas Tailwind untuk menetapkan warna latar belakang, warna teks, berat fon, padding dan jejari jidar pautan href.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
Salin selepas log masuk

Kaedah 2: Gunakan JIT Tailwind
Cara kedua untuk menggayakan pautan href yang tersedia dalam teg
dalam React ialah menggunakan Tailwind CSS JIT atau Just-in-Time. JIT Tailwind CSS atau pengkompil tepat masa digunakan untuk menjana gaya atas permintaan semasa kami menulis templat, dan bukannya menjana segala-galanya di hadapan pada permulaan pembangunan.
Dalam pendekatan ini, kami mendayakan mod JIT dalam Tailwind CSS dan menggunakan kelas terus pada atribut href dalam teg
menggunakan atribut className.
tatabahasa

Berikut ialah sintaks yang mentakrifkan cara menggunakan Tailwind CSS JIT dalam React -

1
2
3
4
5
6
7
8
<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>
Salin selepas log masuk

Dalam sintaks ini, kami mula-mula mentakrifkan kelas tersuai bernama .new-link menggunakan arahan @apply untuk menggunakan kelas CSS Tailwind. Selepas itu, kelas tersuai ini ditambahkan pada atribut kelas href untuk menggunakan gaya yang ditentukan.

Contoh

Dalam contoh ini, kami mentakrifkan kelas CSS yang dipanggil pautan baharu yang menggunakan kelas CSS Tailwind menggunakan arahan @apply. Kami menentukan komponen React yang dipanggil "Apl" yang memaparkan tajuk, perenggan dan teg sauh beberapa komponen.

Dalam kaedah ini, apabila komponen dipaparkan, tag anchor akan digayakan menggunakan kelas CSS pautan baharu yang ditakrifkan dalam teg gaya.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>
Salin selepas log masuk
Dalam artikel ini, kami mempelajari cara menggayakan pautan href dalam React menggunakan Tailwind CSS. Kami mempunyai dua cara berbeza untuk menggayakan pautan href.
Atas ialah kandungan terperinci Bagaimana untuk menggayakan pautan href dalam React menggunakan Tailwind CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

Muzium Dua Point: Panduan Lokasi Bungle Gurun
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu By 王林

Tunjukkan Lagi

Alat panas Tag

Kod&IT

Suara

Perniagaan

Pemasaran

Pengesan AI

Chatbot

Reka bentuk&Seni

Artikel Panas

Muzium Dua Point: Panduan Lokasi Bungle Gurun
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
3 minggu yang lalu By 王林

Tunjukkan Lagi

Tag artikel panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7116

9

Tutorial Java

1534

14

Tutorial Laravel

1254

25

Tutorial PHP

1205

29

Tutorial CakePHP

1153

46

Tunjukkan Lagi

Related knowledge

Menambah bayang -bayang kotak ke blok dan elemen WordPress Mar 09, 2025 pm 12:53 PM
Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar Mar 07, 2025 am 11:33 AM
Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan Mar 02, 2025 am 09:03 AM
Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda Mar 15, 2025 am 11:08 AM
Menjadikan Peralihan Svelte Khas pertama anda

Muat naik fail dengan multer di node.js dan ekspres Mar 02, 2025 am 09:15 AM
Muat naik fail dengan multer di node.js dan ekspres

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma) Mar 04, 2025 am 10:22 AM
Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma) Mar 01, 2025 am 09:32 AM
Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma)

Bekerja dengan Caching Graphql Mar 19, 2025 am 09:36 AM
Bekerja dengan Caching Graphql

See all articles