Siaran ini menggambarkan semua aspek yang mungkin untuk menambah 'gaya asas' dalam CSS Tailwind.
Bagaimana untuk Menambah Gaya 'asas' dalam Tailwind?
'Tailwind CSS' disertakan dengan tiga kaedah berikut untuk menambah gaya 'asas' dalam keseluruhan kandungan HTML atau dalam elemen tertentu:
- Gunakan 'CSS' untuk Menambah gaya asas dalam Tailwind.
- Gunakan 'Plugin' untuk Menambah gaya asas dalam Tailwind.
Mari kita terokai mereka satu persatu.
Prasyarat
Sebelum beralih kepada pelaksanaan praktikal, mula-mula, lihat projek yang baru dibuat bernama 'Linuxhint' yang digunakan untuk menambah 'gaya asas':
Struktur Fail Projek
Sekarang, navigasi ke fail 'index.html' dan lihat kod HTMLnya:
< html >< kepala >
< pautan href = '/dist/output.css' rel = 'lembaran gaya' >
< / kepala >
< badan >
< h2 kelas = 'garis bawah fon pusat teks-teks tebal-merah jambu-600' > Selamat datang ke Linuxhint! < / h2 >< br >
< h3 kelas = 'teks-pusat teks fon-teks tebal-jingga-600' > Tutorial: Menambah gaya asas dalam Tailwind. < / h3 >< br >
< / badan >
Dalam baris kod di atas:
Pengeluaran
Output kod di atas ditunjukkan di sini:
Sekarang, gunakan kaedah yang dibincangkan untuk menyesuaikan kod HTML di atas dengan menambah gaya asas. Mari kita mulakan dengan kaedah 'CSS' Tailwind.
Kaedah 1: Gunakan CSS untuk Menambah 'gaya asas' dalam Tailwind
Kaedah yang paling mudah dan paling mudah untuk menambah gaya asas kepada elemen HTML tertentu adalah dengan menambahkannya dalam fail CSS utama projek. Mari laksanakan tugasan ini secara praktikal dengan mengikuti langkah-langkah yang diberikan.
Langkah 1: Buka Fail CSS
Mula-mula, buka fail CSS utama iaitu, “ style.css ” yang mengandungi lapisan “asas”, “komponen” dan lapisan “utiliti” terbina dalam:
Langkah 2: Tambah CSS
Seterusnya, tambah gaya 'asas' untuk elemen HTML '
' dan '' khusus dengan menggunakan kelas menggunakan ' @memohon arahan ” dalam lapisan “asas” dengan bantuan “ @lapisan ” kata kunci. Kata kunci '@layer' menambah kelas yang ditentukan pada lapisan 'asas' yang ditentukan: @dasar lapisan {
h2 {
@apply teks-3xl;
}
h3 {
@apply text-xl;
}
}
h2 {
@apply teks-3xl;
}
h3 {
@apply text-xl;
}
}
Dalam baris kod di atas, ' Saiz huruf kelas ” digunakan pada elemen “
” dan “” masing-masing untuk membesarkannya kepada saiz yang ditentukan:
Simpan (Ctrl + S) fail.
Langkah 3: Output
Sekarang, jalankan kod dalam pelayan langsung dan lihat output, seperti berikut:
Di sini, output menunjukkan bahawa kelas 'Saiz Fon' Tailwind berjaya digunakan pada elemen yang ditentukan dalam lapisan asas.
Catatan : Pendekatan yang sama digunakan untuk semua kelas CSS Tailwind yang lain.
Kaedah 2: Gunakan Pemalam untuk Menambah 'gaya asas' dalam Tailwind
Kaedah lain yang berguna untuk menambah gaya 'asas' ialah menulis ' pasangkan ” dan gunakan “ addBase() ” fungsi. Fungsi ini membantu untuk mendaftarkan kelas baharu dalam “ asas ” arahan lapisan. Fungsi ini digunakan dalam fail Tailwind 'tailwind.config.js'. Jom buat secara praktikal.
Langkah 1: Tentukan Fungsi 'addBase()'.
Mula-mula, navigasi ke ' tailwind.config.js ” fail konfigurasi dan tambah gaya asas daripada pemalam dan panggil fungsi “addBase()”:
Simpan fail.
Langkah 2: Output
Akhir sekali, jalankan kod HTML yang diberikan dan lihat output:
Seperti yang dilihat, kelas 'Saiz Fon' Tailwind yang ditakrifkan dalam fungsi 'addBase()' sebagai objek JavaScript digunakan pada elemen HTML yang ditentukan.
Kesimpulan
Gaya Tailwind Base boleh ditambah dengan mudah menggunakan “ CSS ” kelas dalam fail CSS utama dan “ Pasangkan ' dengan ' addBase() ” fungsi dalam fail konfigurasi. Kaedah 'CSS' dianggap sebagai kaedah paling mudah kerana ia hanya mentakrifkan gaya asas dalam lapisan 'asas' dan secara automatik melaksanakannya pada elemen yang ditentukan. Sebaliknya, bahagian “plugin” bagi “ tailwind.config.js ” fail memerlukan fungsi “addBase()” untuk mentakrifkan gaya asas sebagai objek JavaScript. Siaran ini menggambarkan semua aspek yang mungkin untuk menambah gaya asas dalam CSS Tailwind.