Artikel ini akan memberikan panduan untuk menata gaya teks di Tailwind menggunakan kerangka berikut:
- Gunakan Kelas Perataan Teks
- Berikan Warna pada Konten Teks
- Gunakan Keluarga Font yang Berbeda
- Berikan Dekorasi Garis Bawah pada Teks
- Berikan Indentasi pada Teks
Bagaimana Cara Menggunakan Kelas Perataan Teks di Tailwind?
Saat menata konten teks, posisi teks sama pentingnya dengan dekorasi. Jika teks tidak disejajarkan dengan benar, keseluruhan desain halaman web akan terlihat aneh. Untuk menyelaraskan teks di Tailwind, kelas berikut digunakan:
teks- { penyelarasan }
Opsi penyelarasan mencakup “ tengah ', ' kiri ', ' Kanan ', Dan ' membenarkan ”. Mari kita pahami masing-masing penyelarasan ini menggunakan demonstrasi di bawah ini:
< P kelas = 'pusat teks bg-slate-200' > Ini adalah contoh Teks dan dilengkapi dengan perataan PUSAT TEKS. < / P >
< saudara >
< P kelas = 'teks-kanan bg-slate-200' > Ini adalah contoh Teks dan dilengkapi dengan perataan TEKS KANAN. < / P >
< saudara >
< P kelas = 'teks-kiri bg-slate-200' > Ini adalah contoh Teks dan dilengkapi dengan perataan TEKS KIRI. < / P >
< saudara >
< P kelas = ' pembenaran teks bg-slate-200' > Ini adalah contoh Teks dan dilengkapi dengan perataan TEXT JUSTIFY. < / P >
Penjelasan kode di atas adalah sebagai berikut:
- Empat “ P ” elemen dibuat dan dipisahkan oleh garis putus-putus.
- Teks dari empat elemen p disejajarkan ke posisi tertentu menggunakan tombol “ teks-{alignment} ' kelas.
- “ bg-{warna}-{angka} ” kelas memberikan warna latar belakang untuk setiap “ P ” elemen.
Keluaran
Dapat dilihat pada keluaran di bawah ini bagaimana masing-masing kelas perataan mempengaruhi posisi teks. Anda dapat melihat bahwa teks elemen pertama rata di tengah, elemen kedua di kanan, elemen ketiga di kiri, dan elemen keempat menampilkan teks rata:
Bagaimana Memberi Warna pada Konten Teks di Tailwind?
Warna memainkan peran penting dalam menata konten teks suatu elemen. Jika warna yang sesuai tidak dipilih, teks menjadi sulit dibaca. Hal ini akan berdampak negatif pada desain tata letak. Untuk mengatur warna teks di Tailwind, gunakan kelas yang diberikan di bawah ini:
teks- { warna } - { nomor }Dalam sintaks yang ditentukan di atas, pengguna harus memberikan nama warna diikuti dengan nomor yang bertanggung jawab atas bayangan warna yang ditentukan.
Demonstrasi yang disediakan di bawah ini memiliki tiga “ P ” elemen yang ditata menggunakan kelas warna teks yang berbeda:
< P kelas = 'teks-violet-500 pusat teks' > Ini adalah Teks Berwarna Violet < / P >< P kelas = 'teks-merah-500 pusat teks' > Ini adalah Teks Berwarna Merah < / P >
< P kelas = 'teks-hijau-500 pusat teks' > Ini adalah Teks Berwarna Hijau < / P >
Kelas yang digunakan pada kode di atas adalah sebagai berikut:
- Pertama ' P ” Elemen diberikan dengan warna ungu menggunakan “ teks-{warna}-{angka} ' kelas.
- Yang kedua dan ketiga “ P ” Elemen disediakan dengan warna merah dan hijau menggunakan metode yang sama.
- “ pusat teks ” kelas memposisikan konten teks ke tengah elemen.
Keluaran
Dari output di bawah ini jelas bahwa warna hitam default teks diubah menjadi warna yang ditentukan menggunakan kelas text-{color}-{number}:
Bagaimana Cara Menggunakan Kelompok Font yang Berbeda di Tailwind?
Font elemen teks dapat digunakan untuk menekankan teks tertentu. Setiap font mempunyai ciri khasnya masing-masing. Untuk mengubah font elemen di Tailwind, gunakan class berikut:
huruf- { keluarga }Tailwind menyediakan tiga jenis font default, yaitu “ tanpa ', ' serif ', Dan ' mono ”. Masing-masing kelompok font ini memiliki gaya font yang berbeda.
Demikian pula, “ font-{berat} Kelas ” dapat digunakan untuk membuat teks menjadi tebal, terang, atau normal. Mari kita gunakan demonstrasi untuk memberikan bobot font ke berbagai kelompok font di Tailwind:
< P kelas = 'font-mono font-pusat teks ekstrabold' > Ini adalah Teks Ekstra Tebal dalam Font MONO < / P >< P kelas = 'font-serif font-pusat teks semibold' > Ini adalah Teks Semi Tebal dalam Font SERIF < / P >
< P kelas = 'font-sans font-pusat teks ekstralight' > Ini adalah Teks Ekstra Ringan dalam Font SANS < / P >
Penjelasan untuk kodenya:
- Tiga ' P ” elemen disediakan oleh keluarga font “mono”, “serf”, dan “sans” menggunakan “ font-{keluarga} ' kelas.
- Demikian pula, ketiganya “ P ” elemen disediakan sebagai “ ekstra berani ', ' setengah tebal ”, dan “ cahaya ekstra ” bobot font menggunakan “ font-{berat} ' kelas.
- Semua elemen ini menggunakan “ pusat teks ” kelas yang menempatkan teks di tengah elemen.
Keluaran
Output yang diberikan menunjukkan bahwa setiap “ P ” elemen memiliki jenis font dan bobot font yang berbeda:
Bagaimana Cara Memberikan Dekorasi Garis Bawah pada Teks di Tailwind?
Elemen teks juga dapat ditata dengan menambahkan berbagai jenis garis bawah. Ini dapat digunakan untuk menekankan bagian teks. Untuk memberikan garis bawah pada elemen teks, kelas berikut digunakan:
menggarisbawahi dekorasi- { gaya }Kata “ menggarisbawahi ” memberikan garis bawah dasar pada elemen dan “ dekorasi-{gaya} Kelas ” digunakan untuk memberikan gaya berbeda pada garis bawah. Mari kita pahami ini menggunakan demonstrasi yang disediakan di bawah ini:
< P kelas = ' garis bawahi dekorasi-pusat teks padat' > Teks ini memiliki Garis Bawah Padat < / P >< P kelas = ' garis bawahi dekorasi-pusat teks ganda' > Teks ini memiliki Garis Bawah Ganda < / P >
< P kelas = ' garis bawahi bagian tengah teks bergelombang dekorasi' > Teks ini memiliki Garis Bawah Bergelombang < / P >
< P kelas = ' garis bawahi pusat teks bertitik dekorasi' > Teks ini memiliki Garis Bawah Bertitik < / P >
Pada kode di atas, ada empat “ P ” elemen yang disediakan oleh “ padat ', ' dobel ', ' bergelombang ', Dan ' burik ” bergaya garis bawah.
Keluaran:
Jelas dari keluaran berikut bahwa elemen telah ditata menggunakan kelas dekorasi berbeda yang digarisbawahi:
Bagaimana Cara Memberikan Indentasi pada Teks di Tailwind?
Dalam dokumen teks apa pun, lekukan digunakan untuk memformat konten teks. Tailwind juga menyediakan kelas default untuk memberikan indentasi pada konten teks menggunakan kelas berikut:
indentasi- { lebar }Lebar dalam sintaks yang ditentukan di atas bertanggung jawab atas ukuran margin indentasi yang diberikan pada konten teks.
Mari kita menata dua elemen teks dengan menetapkannya dengan nilai indentasi yang berbeda dan lihat hasilnya:
< P kelas = ' indentasi-4 py-12' > Ini adalah contoh teks dan dilengkapi dengan Indentasi menggunakan kelas 'indent-4'. < / P >< P kelas = ' indentasi-28 ' > Ini adalah contoh teks dan dilengkapi dengan Indentasi menggunakan kelas 'indent-28'. < / P >
Dalam kode di atas, dua “ P ” dilengkapi dengan lekukan lebarnya “ 4 ” & “ 28 ” masing-masing. Elemen pertama juga dilengkapi dengan padding atas-bawah menggunakan “ hal-12 ' kelas.
Keluaran:
Dapat dilihat pada output di bawah bahwa elemen teks kedua memiliki margin lebih besar di awal teks karena lebar indentasi lebih besar:
Sekian tentang menata gaya teks menggunakan Tailwind.
Kesimpulan
Tailwind menyediakan berbagai kelas untuk menata gaya elemen teks. Untuk menata teks di Tailwind, pengguna dapat menggunakan “ teks-{warna}-{angka} ', ' teks-{alignment} ', ' garis bawahi dekorasi-{style} ', Dan ' indentasi-{lebar} ' kelas. Artikel ini telah memberikan panduan untuk menata gaya teks menggunakan berbagai kelas di Tailwind.