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?
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.
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;
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>
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>
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>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat 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)
Topik panas
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
