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.
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.
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
Untuk memasang Tailwind CSS dalam aplikasi React anda, anda perlu menjalankan arahan berikut dalam terminal atau command prompt -
npm install tailwindcss
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
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'),
],
};
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.
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
import React from 'react';
import './styles.css';
function App() {
return (
<div>
<a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b" className="text-blue-500 underline font-bold">My Link</a>
</div>
);
}
export default App;
Contoh
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="//m.sbmmt.com/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>
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 tegmenggunakan atribut className.
tatabahasa
<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="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="class-name">My Link</a>
Contoh
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="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="new-link"> Search </a>
</div>
); } } ReactDOM.render(
<App />, document.getElementById('react') );
</script>
</body>
</html>
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
