Artikel ini akan menyediakan panduan untuk menggayakan teks dalam Tailwind menggunakan garis besar berikut:
- Gunakan Kelas Penjajaran Teks
- Sediakan Warna pada Kandungan Teks
- Gunakan Keluarga Fon Berbeza
- Sediakan Hiasan Garis bawah pada Teks
- Sediakan Lekukan pada Teks
Bagaimana untuk Menggunakan Kelas Penjajaran Teks dalam Tailwind?
Semasa menggayakan kandungan teks, kedudukan teks adalah sama pentingnya dengan hiasan. Jika teks tidak dijajarkan dengan betul, keseluruhan reka bentuk halaman web akan kelihatan ganjil. Untuk menjajarkan teks dalam Tailwind, kelas berikut digunakan:
teks- { penjajaran }
Pilihan penjajaran termasuk ' pusat ',' dibiarkan ',' betul ”, dan “ mewajarkan ”. Mari kita fahami setiap penjajaran ini menggunakan demonstrasi di bawah:
< hlm kelas = ' pusat teks bg-slate-200' > Ini ialah contoh Teks dan ia disediakan dengan penjajaran PUSAT TEKS. < / hlm >
< br >
< hlm kelas = 'teks-kanan bg-slate-200' > Ini ialah contoh Teks dan ia disediakan dengan penjajaran TEKS KANAN. < / hlm >
< br >
< hlm kelas = 'teks-kiri bg-slate-200' > Ini ialah contoh Teks dan ia disediakan dengan penjajaran TEKS KIRI. < / hlm >
< br >
< hlm kelas = ' text-justify bg-slate-200' > Ini ialah contoh Teks dan ia disediakan dengan penjajaran TEXT JUSTIFY. < / hlm >
Penjelasan kod di atas adalah seperti berikut:
- empat ' hlm ” elemen dicipta dan dipisahkan dengan pemisah baris.
- Teks empat elemen p diselaraskan dengan kedudukan tertentu menggunakan ' teks-{alignment} ” kelas.
- ' bg-{warna}-{nombor} 'kelas menyediakan warna latar belakang untuk setiap ' hlm ” unsur.
Pengeluaran
Ia boleh dilihat dalam output di bawah bagaimana setiap kelas penjajaran mempengaruhi kedudukan teks. Anda boleh melihat bahawa teks elemen pertama dijajarkan sebagai tengah, kedua sebagai kanan, ketiga sebagai kiri dan elemen keempat menunjukkan teks yang dibenarkan:
Bagaimana untuk Menyediakan Warna kepada Kandungan Teks dalam Tailwind?
Warna memainkan peranan penting dalam menggayakan kandungan teks sesuatu elemen. Jika warna yang sesuai tidak dipilih, teks boleh menjadi sukar dibaca. Ini akan menjejaskan reka bentuk susun atur secara negatif. Untuk menetapkan warna teks dalam Tailwind, gunakan kelas yang diberikan di bawah:
teks- { warna } - { nombor }Dalam sintaks yang ditentukan di atas, pengguna perlu memberikan nama warna diikuti dengan nombor yang akan bertanggungjawab untuk naungan warna yang ditentukan.
Demonstrasi yang disediakan di bawah mempunyai tiga ' hlm ” elemen yang digayakan menggunakan kelas warna teks yang berbeza:
< hlm kelas = ' text-violet-500 text-center' > Ini ialah Teks Berwarna Violet < / hlm >< hlm kelas = 'teks-merah-500 pusat-teks' > Ini ialah Teks Berwarna Merah < / hlm >
< hlm kelas = 'teks-hijau-500 pusat-teks' > Ini ialah Teks Berwarna Hijau < / hlm >
Kelas yang digunakan dalam kod di atas adalah seperti berikut:
- Yang pertama ' hlm elemen ” disediakan dengan warna ungu menggunakan “ teks-{warna}-{nombor} ” kelas.
- Kedua dan ketiga ' hlm ” elemen disediakan dengan warna merah dan hijau menggunakan kaedah yang sama.
- ' pusat teks ” kelas meletakkan kandungan teks ke tengah elemen.
Pengeluaran
Daripada output di bawah adalah jelas bahawa warna hitam lalai teks ditukar kepada warna yang ditentukan menggunakan kelas teks-{color}-{number}:
Bagaimana untuk Menggunakan Keluarga Font Berbeza dalam Tailwind?
Fon elemen teks boleh digunakan untuk menekankan teks tertentu. Setiap fon mempunyai ciri tersendiri. Untuk menukar fon elemen dalam Tailwind, gunakan kelas berikut:
fon- { keluarga }Tailwind menyediakan tiga keluarga fon lalai iaitu “ tanpa ',' serif ”, dan “ mono ”. Setiap keluarga fon ini mempunyai gaya fon yang berbeza.
Begitu juga, ' fon-{berat} kelas ” boleh digunakan untuk menjadikan teks tebal, ringan atau biasa. Mari gunakan demonstrasi untuk memberikan berat fon kepada keluarga fon yang berbeza dalam Tailwind:
< hlm kelas = 'font-mono font-extrabold text-center' > Ini ialah Teks Ekstra Tebal dalam Fon MONO < / hlm >< hlm kelas = ' font-serif font-semibold text-center' > Ini ialah Teks Separuh Tebal dalam Fon SERIF < / hlm >
< hlm kelas = ' font-sans font-extralight text-center' > Ini ialah Teks Cahaya Tambahan dalam Fon SANS < / hlm >
Penjelasan untuk kod:
- Ketiga-tiga ' hlm elemen ' disediakan oleh keluarga fon 'mono', 'serf', dan 'sans' menggunakan ' fon-{keluarga} ” kelas.
- Begitu juga ketiga-tiga hlm 'elemen disediakan sebagai ' lebih berani ',' separuh tebal ', dan juga ' cahaya tambahan ” berat fon menggunakan “ fon-{berat} ” kelas.
- Kesemua elemen ini menggunakan “ pusat teks ” kelas yang meletakkan teks di tengah-tengah elemen.
Pengeluaran
Output yang diberikan menunjukkan bahawa setiap ' hlm 'elemen mempunyai keluarga fon dan berat fon yang berbeza:
Bagaimana untuk Menyediakan Hiasan Garis Bawah pada Teks dalam Tailwind?
Elemen teks juga boleh digayakan dengan menambahkan jenis garis bawah yang berbeza. Ini boleh digunakan untuk menekankan sebahagian daripada teks. Untuk memberikan garis bawah pada elemen teks, kelas berikut digunakan:
garis bawah hiasan- { gaya }Perkataan itu ' garis bawah ' menyediakan garis bawah asas kepada elemen dan ' hiasan-{style} kelas ” digunakan untuk menyediakan gaya yang berbeza pada garis bawah. Mari fahami ini menggunakan demonstrasi yang disediakan di bawah:
< hlm kelas = 'gariskan hiasan-pusat teks padat' > Teks ini mempunyai Garis Bawah Padat < / hlm >< hlm kelas = 'gariskan hiasan-pusat teks berganda' > Teks ini mempunyai Garis Bawah Berganda < / hlm >
< hlm kelas = 'gariskan hiasan-pusat teks beralun' > Teks ini mempunyai Garis Bawah Beralun < / hlm >
< hlm kelas = 'gariskan pusat teks bertitik hiasan' > Teks ini mempunyai Garis Bawah Bertitik < / hlm >
Dalam kod di atas, terdapat empat ' hlm 'elemen yang disediakan oleh' padu ',' berganda ',' beralun ”, dan “ bertitik ” menggariskan garis bawah.
Pengeluaran:
Jelas daripada output berikut bahawa elemen telah digayakan menggunakan kelas hiasan bergaris bawah yang berbeza:
Bagaimana untuk Menyediakan Lekukan pada Teks dalam Tailwind?
Dalam sebarang dokumen teks, lekukan digunakan untuk memformat kandungan teks. Tailwind juga menyediakan kelas lalai untuk memberikan lekukan kepada kandungan teks menggunakan kelas berikut:
inden- { lebar }Lebar dalam sintaks yang ditentukan di atas bertanggungjawab untuk saiz margin lekukan yang diberikan kepada kandungan teks.
Mari kita gayakan dua elemen teks dengan memberikannya dengan nilai lekukan yang berbeza dan lihat hasilnya:
< hlm kelas = 'indent-4 py-12' > Ini ialah teks sampel dan ia disediakan dengan Inden menggunakan kelas 'indent-4'. < / hlm >< hlm kelas = 'inden-28' > Ini ialah teks sampel dan ia disediakan dengan Inden menggunakan kelas 'indent-28'. < / hlm >
Dalam kod di atas, dua ' hlm ' disediakan dengan lekukan lebar ' 4 ” & “ 28 ” masing-masing. Elemen pertama juga disediakan dengan pelapik atas-bawah menggunakan ' p-12 ” kelas.
Pengeluaran:
Ia boleh dilihat dalam output di bawah bahawa elemen teks kedua mempunyai margin yang lebih besar pada permulaan teks kerana lebar lekukan yang lebih besar:
Itu semua tentang menggayakan teks menggunakan Tailwind.
Kesimpulan
Tailwind menyediakan pelbagai kelas untuk menggayakan elemen teks. Untuk menggayakan teks dalam Tailwind, pengguna boleh menggunakan “ teks-{warna}-{nombor} ',' teks-{alignment} ',' gariskan hiasan-{style} ”, dan “ indent-{width} ” kelas. Artikel ini telah menyediakan panduan untuk menggayakan teks menggunakan pelbagai kelas dalam Tailwind.