Tailwind ialah rangka kerja CSS yang menawarkan satu set nilai yang dipratentukan untuk pelbagai sifat, seperti warna, jarak, saiz fon, dll. Walau bagaimanapun, kadangkala pengguna mungkin mahu menggunakan nilai yang tidak disertakan dalam konfigurasi lalai, seperti tersuai warna atau margin tertentu. Dalam keadaan ini, mereka boleh menggunakan nilai sewenang-wenangnya.

Artikel ini akan menerangkan kaedah untuk menggunakan nilai arbitrari dalam Tailwind CSS.

Bagaimana untuk Menggunakan Nilai Arbitrari dalam Tailwind?

Nilai arbitrari ialah nilai tersuai yang boleh ditulis terus dalam atribut kelas HTML tanpa mentakrifkannya dalam fail konfigurasi Tailwind. Ia diawali dengan tatatanda kurungan segi empat sama, seperti [24px], [2.5rem], dsb. Untuk menggunakan nilai arbitrari dalam Tailwind, gunakan notasi kurungan segi empat sama dan nyatakan sebarang nilai tersuai untuk menjana kelas utiliti secara dinamik.

Semak langkah-langkah yang disenaraikan di bawah untuk pemahaman yang lebih baik:

Langkah 1: Gunakan Nilai Arbitrari dalam Program HTML

Buat program HTML dan gunakan notasi kurungan segi empat sama dengan sebarang nilai tersuai untuk mencipta kelas yang dikehendaki. Sebagai contoh, kami telah menggunakan “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, dan kelas lain:

di sini:

• “bg-[#e9e516]” kelas menetapkan warna latar belakang
  kepada “#e9e516” (kuning).
• “w-[600px]” kelas menetapkan lebar
  kepada 600 piksel.
• “h-[400px]” kelas menggunakan ketinggian 400 piksel pada elemen
  .
• “p-[13px]” kelas menetapkan padding
  kepada 13 piksel.
• “m-[19px]” kelas menetapkan margin
  kepada 19 piksel.

• 'teks-[30px]' kelas menetapkan saiz fon elemen

  kepada 30 piksel.

• “teks-[#7405ab]” kelas menetapkan warna teks elemen

  kepada ungu (#7405ab).

• 'penjejakan-[0.5rem]' kelas menggunakan jarak huruf kepada 0.5 rem kepada elemen

  .

Langkah 2: Sahkan Output

Untuk memastikan bahawa nilai arbitrari berfungsi dengan betul, lihat halaman web HTML:

Output di atas menunjukkan bahawa nilai arbitrari berfungsi dengan betul seperti yang ditakrifkan.

Kesimpulan

Untuk menggunakan nilai arbitrari dalam Tailwind, gunakan notasi kurungan segi empat sama dengan sebarang nilai tersuai dalam program HTML untuk menjana kelas secara dinamik. Pengguna boleh menggunakan nilai untuk mana-mana harta yang menerima nilai angka atau warna, seperti saiz fon, warna, lebar, tinggi, jidar, padding, dsb. Artikel ini telah menerangkan kaedah untuk menggunakan nilai arbitrari dalam CSS Tailwind.