Artikel ini akan menerangkan:
- Apakah yang dilakukan oleh Skrin, Warna dan Jarak dalam Tema Tailwind?
- Bagaimana untuk Menggunakan Skrin, Warna dan Jarak dalam Tema Tailwind?
- Bagaimana untuk Mengkonfigurasi Skrin, Warna dan Jarak dalam Tema Tailwind?
Apakah yang dilakukan oleh Skrin, Warna dan Jarak dalam Tema Tailwind?
The skrin kunci membenarkan pengguna mengubah suai titik putus responsif dalam projek Tailwind. Titik putus ialah titik di mana reka letak berubah berdasarkan lebar skrin. Secara lalai, Tailwind merangkumi lima skrin iaitu sm (kecil), md (sederhana), lg (besar) dan xl (lebih besar). Walau bagaimanapun, pengguna boleh menentukan titik putus mereka menggunakan kekunci 'skrin', dan kemudian menggunakannya dalam program HTML.
Warna kunci digunakan untuk mengubah suai palet warna. Warna adalah salah satu ciri utama reka bentuk. Tema Tailwind menyediakan palet warna lalai dengan pelbagai warna, tetapi pengguna juga boleh menyesuaikannya atau memanjangkannya dengan warna mereka. Pengguna boleh menentukan warna menggunakan kekunci 'warna', dan kemudian menggunakannya dengan mana-mana kelas utiliti berkaitan warna dalam kod HTML.
The jarak kunci digunakan untuk mengubah suai jarak dan skala saiz. Jarak adalah satu lagi aspek penting reka bentuk, kerana ia mempengaruhi kebolehbacaan, penjajaran dan keseimbangan elemen. Tema Tailwind menyediakan skala jarak yang konsisten berdasarkan nilai asas 4 piksel (0.25rem). Walau bagaimanapun, ia juga boleh disesuaikan atau dilanjutkan dengan nilai tersuai. Pengguna boleh menentukan nilai jarak menggunakan kekunci 'jarak', dan kemudian menggunakannya dengan mana-mana kelas utiliti yang berkaitan dengan jarak dalam fail program.
Bagaimana untuk Menggunakan Skrin, Warna dan Jarak dalam Tema Tailwind?
Untuk menggunakan skrin, warna dan jarak dalam tema Tailwind, buat program HTML dan gunakan ciri skrin lalai, warna dan jarak seperti yang diperlukan. Kemudian, jalankan program HTML dan lihat halaman web HTML. Mari kita ikuti langkah-langkah yang dinyatakan di bawah:
Langkah 1: Cipta Halaman Web HTML
Mula-mula, buat program HTML dan gunakan skrin lalai, warna dan sifat jarak:
= 'teks-3xl m-5 sm:teks-putih teks-pusat' >
Petunjuk Linux!
>
= 'teks-2xl m-5 md:teks-putih teks-pusat' >
Selamat datang ke Tutorial ini
>
= 'teks-2xl m-5 lg:teks-putih teks-pusat' >
CSS Tailwind
>
Selamat datang ke Tutorial ini
>
= 'teks-2xl m-5 lg:teks-putih teks-pusat' >
CSS Tailwind
>
= 'teks-2xl m-5 xl:teks-putih teks-pusat' >
Tema
>
>
>
di sini:
- “ -p-10 ” dan “ m-5 ” ialah harta jarak.
- “ sm ”, “ md ”, “ lg ”, dan “ xl ” ialah sifat skrin.
- “ merah-700 ”, “ biru-600 ”, “ hijau-500 ”, “ merah jambu-700 ”, dan “ putih ” ialah sifat warna.
Langkah 2: Jalankan Program HTML
Kemudian, jalankan program HTML untuk melihat halaman web HTML:
Dalam output di atas, skrin lalai, warna dan sifat jarak boleh dilihat.
Bagaimana untuk Mengkonfigurasi Skrin, Warna dan Jarak dalam Tema Tailwind?
Untuk mengkonfigurasi skrin, warna dan jarak dalam tema Tailwind, lihat langkah yang diberikan:
- Buka ' tailwind.config.js ” fail.
- Pergi ke ' tema ” dan sesuaikan skrin, warna dan sifat jarak seperti yang diperlukan.
- Gunakan sifat tersuai dalam program HTML.
- Lihat halaman web HTML untuk pengesahan.
Langkah 1: Konfigurasikan Skrin, Warna dan Jarak dalam Fail Konfigurasi Tailwind
Di dalam ' tema bahagian '' tailwind.config.js ”, sesuaikan skrin, warna dan sifat jarak mengikut keperluan. Sebagai contoh, kami telah menyesuaikan sifat ini seperti berikut:
modul .eksport = {kandungan : [ './index.html' ] ,
tema : {
//menyesuaikan skrin
skrin : {
sm : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//menyesuaikan warna
warna : {
putih : #ffffff ,
hitam : '#000000' ,
biru : '#08609c' ,
hijau : '#089c28' ,
merah : '#9c0306' ,
kuning : '#ede60e' ,
merah jambu : '#ed0e55' ,
} ,
//menyesuaikan jarak
jarak : {
px : '1px' ,
'0' : '0' ,
'1' : '0.25rem' ,
'2' : '0.5rem' ,
'3' : '0.75rem' ,
'4' : '1 perkara' ,
'5' : '1.25rem' ,
'6' : '1.5rem' ,
'8' : '2rem' ,
'10' : '2.5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'dua puluh' : '5rem' ,
}
} ,
} ;
Dalam kod ini:
- ' skrin sifat ” mentakrifkan titik putus skrin untuk pelbagai saiz. Ia menyediakan alias (seperti sm, md, lg, xl) dan nilai setaranya.
- ' warna sifat ” mentakrifkan warna tersuai menggunakan nama mereka dan pasangan nilai heksadesimal.
- ' jarak sifat ” menentukan nilai jarak tersuai untuk banyak saiz. Ia menggunakan alias (seperti px, 0, 1, 2, dsb.) untuk mewakili nilai jarak tertentu dalam unit 'rem'.
Langkah 2: Gunakan Sifat Dikonfigurasikan dalam Program HTML
Sekarang, gunakan sifat tersuai dalam program HTML:
= 'teks-3xl m-5 sm:teks-putih teks-pusat' >
Petunjuk Linux!
>
= 'teks-2xl m-5 md:teks-putih teks-pusat' >
Selamat datang ke Tutorial ini
>
= 'teks-2xl m-5 lg:teks-putih teks-pusat' >
CSS Tailwind
>
Selamat datang ke Tutorial ini
>
= 'teks-2xl m-5 lg:teks-putih teks-pusat' >
CSS Tailwind
>
= 'teks-2xl m-5 xl:teks-putih teks-pusat' >
Tema
>
>
>
Langkah 3: Lihat Halaman Web HTML
Akhir sekali, sahkan output dengan melihat halaman web HTML:
Dapat diperhatikan bahawa kandungan halaman web berubah mengikut skrin yang dikonfigurasikan, warna, dan sifat jarak.
Kesimpulan
The skrin kunci membenarkan pengguna untuk menyesuaikan/mengubah suai titik putus responsif, the warna kunci digunakan untuk menyesuaikan palet warna untuk projek dan jarak kunci digunakan untuk menyesuaikan jarak dan skala saiz. Selain itu, pengguna boleh menyesuaikan kunci atau sifat ini mengikut keperluan mereka. Artikel ini telah menerangkan skrin, warna dan jarak dalam tema Tailwind.