Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menggayakan pautan href dalam React menggunakan Tailwind CSS?
Bagaimana untuk menggayakan pautan href dalam React menggunakan Tailwind CSS?
- PHPzke hadapan
- 2023-09-12 10:29:14883semak imbas
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 -
npx create-react-app my-app
Langkah 2: Pasang Tailwind CSS
Untuk memasang Tailwind CSS dalam aplikasi React anda, anda perlu menjalankan arahan berikut dalam terminal atau command prompt -
npm install tailwindcss
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.
npx tailwindcss init
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'),
],
};
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';
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 tegdalam 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. b>
tatabahasaBerikut ialah sintaks yang mentakrifkan cara menggunakan atribut className dalam React menggunakan Tailwind CSS -
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;
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.
<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>
Kaedah 2: Gunakan JIT Tailwind Cara kedua untuk menggayakan pautan href yang tersedia dalam teg
dalamReact 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 tegmenggunakan atribut className.
tatabahasaBerikut ialah sintaks yang mentakrifkan cara menggunakan Tailwind CSS JIT dalam React -
<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>
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.
<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>
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!