Artikel ini akan menjelaskan:
- Apa fungsi Layar, Warna, dan Penspasian di Tema Tailwind?
- Bagaimana Cara Menggunakan Layar, Warna, dan Spasi di Tema Tailwind?
- Bagaimana Cara Mengonfigurasi Layar, Warna, dan Spasi di Tema Tailwind?
Apa fungsi Layar, Warna, dan Penspasian di Tema Tailwind?
Itu layar kunci memungkinkan pengguna untuk memodifikasi breakpoint responsif dalam proyek Tailwind. Breakpoint adalah titik di mana tata letak berubah berdasarkan lebar layar. Secara default, Tailwind menyertakan lima layar, yaitu sm (kecil), md (sedang), lg (besar), dan xl (ekstra besar). Namun, pengguna dapat menentukan breakpoint mereka menggunakan tombol 'layar', dan kemudian menggunakannya dalam program HTML.
Warna kunci digunakan untuk memodifikasi palet warna. Warna adalah salah satu fitur desain yang paling utama. Tema Tailwind menyediakan palet warna default dengan berbagai corak, tetapi pengguna juga dapat menyesuaikannya atau memperluasnya dengan warna mereka. Pengguna dapat menentukan warna menggunakan tombol 'warna', dan kemudian menggunakannya dengan kelas utilitas terkait warna apa pun dalam kode HTML.
Itu jarak kunci digunakan untuk mengubah jarak dan skala ukuran. Penspasian adalah aspek penting lain dari desain, karena memengaruhi keterbacaan, penyelarasan, dan keseimbangan elemen. Tema Tailwind memberikan skala jarak yang konsisten berdasarkan nilai dasar 4 piksel (0,25rem). Namun, itu juga dapat disesuaikan atau diperluas dengan nilai khusus. Pengguna dapat menentukan nilai penspasian menggunakan tombol 'penspasian', dan kemudian menggunakannya dengan kelas utilitas terkait penspasian dalam file program.
Bagaimana Cara Menggunakan Layar, Warna, dan Spasi di Tema Tailwind?
Untuk menggunakan layar, warna, dan spasi dalam tema Tailwind, buat program HTML dan gunakan properti layar, warna, dan spasi default sesuai kebutuhan. Kemudian, jalankan program HTML dan lihat halaman web HTML. Mari kita ikuti langkah-langkah yang disebutkan di bawah ini:
Langkah 1: Buat Halaman Web HTML
Pertama, buat program HTML dan gunakan properti layar, warna, dan spasi default:
= 'text-3xl m-5 sm:text-white text-center' >
Petunjuk Linux!
>
= 'text-2xl m-5 md:text-white text-center' >
Selamat datang di Tutorial ini
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS penarik
>
Selamat datang di Tutorial ini
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS penarik
>
= 'text-2xl m-5 xl:text-white text-center' >
Tema
>
>
>
Di Sini:
- “ -p-10 ' Dan ' m-5 ” adalah properti spasi.
- “ sm ”, “ md ”, “ lg ', Dan ' xl ” adalah properti layar.
- “ merah-700 ”, “ biru-600 ”, “ hijau-500 ”, “ merah muda-700 ', Dan ' putih ” adalah properti warna.
Langkah 2: Jalankan Program HTML
Kemudian, jalankan program HTML untuk melihat halaman web HTML:
Pada output di atas, layar default, warna, dan properti spasi dapat dilihat.
Bagaimana Cara Mengonfigurasi Layar, Warna, dan Spasi di Tema Tailwind?
Untuk mengonfigurasi layar, warna, dan spasi di tema Tailwind, lihat langkah-langkah yang diberikan:
- Buka ' penarik angin.config.js ” berkas.
- Pergi ke “ tema ” dan sesuaikan properti layar, warna, dan spasi sesuai kebutuhan.
- Gunakan properti yang disesuaikan dalam program HTML.
- Lihat halaman web HTML untuk verifikasi.
Langkah 1: Konfigurasikan Layar, Warna, dan Spasi di File Konfigurasi Tailwind
Dalam ' tema ” bagian dari “ penarik angin.config.js ” file, sesuaikan layar, warna, dan properti penspasian sesuai kebutuhan. Misalnya, kami telah menyesuaikan properti ini sebagai berikut:
modul .ekspor = {isi : [ './index.html' ] ,
tema : {
//menyesuaikan layar
layar : {
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 spasi
jarak : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25 rem' ,
'2' : '0,5 rem' ,
'3' : '0,75 rem' ,
'4' : '1 hal' ,
'5' : '1,25 rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2.5rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'dua puluh' : '5rem' ,
}
} ,
} ;
Dalam kode ini:
- “ layar ” properti menentukan breakpoint layar untuk berbagai ukuran. Ini memberikan alias (seperti sm, md, lg, xl) dan nilai yang setara.
- “ warna ” properti mendefinisikan warna khusus menggunakan pasangan nama dan nilai heksadesimalnya.
- “ jarak ” properti menentukan nilai spasi khusus untuk banyak ukuran. Ini menggunakan alias (seperti px, 0, 1, 2, dll.) untuk mewakili nilai spasi tertentu dalam satuan 'rem'.
Langkah 2: Gunakan Properti yang Dikonfigurasi dalam Program HTML
Sekarang, gunakan properti yang disesuaikan dalam program HTML:
= 'text-3xl m-5 sm:text-white text-center' >
Petunjuk Linux!
>
= 'text-2xl m-5 md:text-white text-center' >
Selamat datang di Tutorial ini
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS penarik
>
Selamat datang di Tutorial ini
>
= 'text-2xl m-5 lg:text-white text-center' >
CSS penarik
>
= 'text-2xl m-5 xl:text-white text-center' >
Tema
>
>
>
Langkah 3: Lihat Halaman Web HTML
Terakhir, verifikasi hasilnya dengan melihat halaman web HTML:
Dapat diamati bahwa konten halaman web berubah sesuai dengan layar, warna, dan properti spasi yang dikonfigurasi.
Kesimpulan
Itu layar kunci memungkinkan pengguna untuk menyesuaikan/memodifikasi breakpoint responsif, itu warna kunci digunakan untuk menyesuaikan palet warna untuk proyek dan jarak kunci digunakan untuk menyesuaikan jarak dan skala ukuran. Selain itu, pengguna dapat menyesuaikan kunci atau properti ini sesuai dengan kebutuhannya. Artikel ini telah menjelaskan layar, warna, dan spasi dalam tema Tailwind.