Tailwind CSS Academy · Pelajaran

Nilai Jarak Tersuai

Tambahkan nilai jarak khusus projek seperti spacing.18 atau spacing.128 pada tema untuk mengisi jurang dalam skala lalai.

Pelajaran 3 daripada 413 langkah

Nilai Jarak Tersuai ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Skala Jarak Lalai Tailwind

Skala jarak lalai Tailwind meliputi nilai daripada 0 hingga 96 (0 hingga 24rem dalam kenaikan 0.25rem bagi nilai kecil, kemudian kenaikan yang lebih besar). Skala ini digunakan secara konsisten merentas utiliti margin, padding, lebar, tinggi, jurang dan kedudukan. Nilai tersebut direka untuk memenuhi sebahagian besar keperluan jarak antara muka pengguna, tetapi reka bentuk dunia sebenar kadangkala memerlukan nilai yang berada di antara atau di luar nilai lalai.

/* Tailwind default spacing examples */
spacing.0   = 0px
spacing.0.5 = 2px
spacing.1   = 4px
spacing.2   = 8px
spacing.4   = 16px
spacing.8   = 32px
spacing.16  = 64px
spacing.32  = 128px
spacing.64  = 256px
spacing.96  = 384px

Mengapa Jarak Tersuai Diperlukan

Sistem reka bentuk sering memerlukan nilai jarak di luar skala lalai — nilai 128 (32rem) untuk bahagian wira seluruh halaman, nilai 4.5 (18px) untuk unsur tertentu yang berada di antara 4 (16px) dan 5 (20px) standard, atau nilai 13 untuk lebar lajur grid tertentu. Daripada menggunakan nilai sewenang-wenangnya dengan notasi kurungan setiap kali, tambahkan nilai ini sekali pada konfigurasi dan berikan nama kelas utiliti yang kemas.

Menambahkan Jarak Tersuai dalam Konfigurasi

Tambahkan nilai jarak tersuai dalam theme.extend.spacing. Kunci menjadi akhiran dalam semua utiliti jarak, manakala nilainya ialah ukuran CSS yang anda kehendaki. Gunakan kunci rentetan untuk nombor perpuluhan atau nombor besar supaya kunci tersebut ditafsirkan dengan betul. Selepas ditambahkan, jarak tersuai anda berfungsi secara automatik merentas m-*, p-*, w-*, h-*, gap-*, inset-* dan semua utiliti jarak yang lain.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '4.5':  '1.125rem', // 18px — between default 4 and 5
        '13':   '3.25rem',  // 52px
        '128':  '32rem',    // 512px — for large hero sections
        '144':  '36rem',    // 576px
        '160':  '40rem',    // 640px
      },
    },
  },
};

Menggunakan Utiliti Jarak Tersuai

Selepas menambahkan nilai jarak tersuai, gunakannya sama seperti utiliti jarak terbina dalam. Nama kunci diletakkan selepas awalan utiliti dan tanda sempang. Jarak tersuai berfungsi dengan awalan responsif, mod gelap dan varian keadaan sama seperti nilai lalai. Sifat merentas utiliti ini bermakna anda menulis konfigurasi sekali sahaja untuk mendapatkan utiliti padding, margin, lebar, tinggi dan jurang daripada takrifan tunggal itu.

<!-- Using custom spacing values -->
<div class="p-4.5 m-13">   <!-- 18px padding, 52px margin -->
  Custom spacing in padding and margin
</div>

<section class="min-h-128">    <!-- 512px minimum height -->
  Full hero section
</section>

<div class="grid grid-cols-3 gap-4.5">
  <!-- 18px gap between grid items -->
</div>

Menggantikan Keseluruhan Skala Jarak

Bagi projek dengan sistem reka bentuk yang ketat dan hanya boleh menggunakan nilai jarak tertentu, gantikan keseluruhan skala jarak dengan meletakkan nilai anda terus dalam theme.spacing (di luar extend). Dengan cara ini, tiada pembangun yang akan menggunakan nilai jarak di luar set yang diluluskan secara tidak sengaja. Gunakan pendekatan ini dengan berhati-hati — menghapuskan nilai lalai Tailwind akan membuang banyak kelas utiliti yang lazim diperlukan.

// Strict spacing system: only these values are available
module.exports = {
  theme: {
    spacing: {
      '0':  '0px',
      '1':  '4px',
      '2':  '8px',
      '3':  '12px',
      '4':  '16px',
      '6':  '24px',
      '8':  '32px',
      '12': '48px',
      '16': '64px',
      '24': '96px',
    },
  },
};

Kunci Jarak Pecahan dan Perpuluhan

Tailwind mengendalikan kunci pecahan seperti '4.5' dengan menjana kelas utiliti menggunakan versi perpuluhan yang selamat untuk CSS. Nama kelas menggunakan pecahan seperti yang ditulis: p-4.5, m-4.5. Bagi kunci yang mengandungi tanda serong (seperti pecahan untuk jarak berasaskan peratusan), tanda serong itu dikodkan dalam pemilih CSS. Sentiasa letakkan kunci perpuluhan dan pecahan dalam tanda petikan sebagai rentetan dalam objek konfigurasi untuk mengelakkan JavaScript mentafsirkannya sebagai literal angka.

// tailwind.config.js
spacing: {
  '0.5':  '2px',   // p-0.5, m-0.5 (already in defaults)
  '1.5':  '6px',   // p-1.5, m-1.5 (already in defaults)
  '4.5':  '1.125rem', // CUSTOM: p-4.5
  '13':   '3.25rem',  // CUSTOM: p-13
  '18':   '4.5rem',   // CUSTOM: p-18
  '22':   '5.5rem',   // CUSTOM: p-22
}

Nilai Jarak Negatif

Tailwind menjana varian negatif secara automatik untuk semua nilai jarak, sama ada lalai atau tersuai. Jika anda menambahkan '128': '32rem' pada konfigurasi jarak, anda juga akan mendapat -m-128, -mt-128, -inset-128 dan sebagainya. Nilai negatif dijana secara automatik — tiada entri konfigurasi berasingan diperlukan. Nilai ini amat berguna untuk unsur bertindih, petikan tarik keluar dan kedudukan hiasan.

<!-- Negative spacing pulls elements outside their container -->
<div class="relative">
  <div class="bg-blue-100 p-8">
    Main content
    <!-- This element extends 4px outside the parent top -->
    <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5">
      NEW
    </span>
  </div>
</div>

Jarak Relatif kepada Saiz Fon

Kadangkala anda mahu nilai jarak yang berubah mengikut saiz teks dan bukannya nilai rem tetap. Tambahkan nilai jarak menggunakan unit em pada konfigurasi — nilai ini akan menjadi relatif kepada saiz fon unsur itu sendiri. Sebagai contoh, butang dengan padding px-1.5em akan mempunyai padding mendatar berkadar tanpa mengira sama ada teks butang itu kecil atau besar.

// tailwind.config.js
spacing: {
  // em-based spacing (relative to font-size)
  '0.25em': '0.25em',
  '0.5em':  '0.5em',
  '0.75em': '0.75em',
  '1em':    '1em',
  '1.25em': '1.25em',
  '1.5em':  '1.5em',
  '2em':    '2em',
}

Jarak untuk Grid Sistem Reka Bentuk

Apabila reka bentuk anda berasaskan sistem grid 8px (atau unit asas 4px), petakan keseluruhan grid itu kepada konfigurasi jarak anda. Grid 8px bermaksud semua jarak ialah gandaan 8px: 8, 16, 24, 32, 40, 48, 64, 80, 96, 128. Skala jarak lalai Tailwind sudah sejajar dengan ini (1 unit = 4px, jadi 2 = 8px, 4 = 16px, 6 = 24px, 8 = 32px). Anda mungkin hanya perlu melanjutkannya dengan nilai melebihi 96.

// 8px grid — Tailwind already aligns, just extend for larger values
spacing: {
  // Already in defaults (4px base unit):
  // 2=8px, 4=16px, 6=24px, 8=32px, 10=40px, 12=48px, 16=64px, 20=80px, 24=96px

  // Extend for larger sections
  '112': '28rem',  // 448px (= 56 units of 8px)
  '128': '32rem',  // 512px
  '160': '40rem',  // 640px
  '192': '48rem',  // 768px
  '224': '56rem',  // 896px
  '256': '64rem',  // 1024px
}

Nilai Sewenang-wenangnya sebagai Alternatif

Apabila anda memerlukan nilai jarak sekali guna dan tidak mahu memenuhi konfigurasi anda, gunakan sintaks nilai sewenang-wenang Tailwind dengan kurungan siku: p-[22px], w-[347px], mt-[3.75rem]. Sintaks ini menjana nilai CSS yang tepat tanpa menambahkannya pada konfigurasi. Nilai sewenang-wenang sesuai untuk penggantian sekali sahaja tetapi tidak sepatutnya menjadi kebiasaan — jika anda menggunakan nilai yang sama tiga kali atau lebih, tambahkan nilai itu pada konfigurasi.

<!-- Arbitrary values for truly one-off sizes -->
<div class="p-[22px] w-[347px] mt-[3.75rem]">
  One-off dimensions from design spec
</div>

<!-- Prefer config-based values for repeated use -->
<!-- BAD: p-[22px] used in 15 components -->
<!-- GOOD: Add '22': '1.375rem' to spacing config, use p-22 everywhere -->

Mendokumentasikan Sistem Jarak Anda

Apabila jarak tersuai anda bertambah, dokumentasikan jarak tersebut bersama token warna dan tipografi anda. Cipta rujukan visual jarak yang ringkas dalam Storybook, dokumentasi sistem reka bentuk atau halaman HTML statik yang memaparkan setiap nilai jarak sebagai blok berwarna. Langkah ini membantu pereka bentuk dan pembangun menggunakan nilai yang betul daripada konfigurasi, bukannya memilih nilai sewenang-wenang atau nilai sekali guna yang tidak konsisten.

<!-- Simple spacing token preview -->
<div class="space-y-2">
  <div class="flex items-center gap-4">
    <div class="bg-blue-200 h-4" style="width: 1.125rem;"></div>
    <span class="text-sm font-mono">spacing.4.5 = 1.125rem (18px)</span>
  </div>
  <div class="flex items-center gap-4">
    <div class="bg-blue-400 h-4" style="width: 3.25rem;"></div>
    <span class="text-sm font-mono">spacing.13 = 3.25rem (52px)</span>
  </div>
</div>

Semakan Pantas

Uji pemahaman anda tentang nilai jarak tersuai dalam Tailwind CSS.

Jawab dalam pelajaran interaktif

Ringkasan Pelajaran

Dalam pelajaran ini, anda telah mempelajari perkara berikut: tambahkan jarak tersuai dalam theme.extend.spacing untuk melanjutkan skala lalai tanpa menggantikannya, jarak tersuai berfungsi secara automatik merentas semua utiliti jarak (padding, margin, lebar, tinggi, jarak), dan nilai sewenang-wenangnya dengan notasi kurungan ialah alternatif yang baik untuk ukuran yang benar-benar sekali sahaja. Seterusnya, kita akan meneroka sifat tersuai CSS sebagai token reka bentuk dalam Tailwind.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Nilai Jarak Tersuai” percuma?

Ya — teks penuh “Nilai Jarak Tersuai” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Nilai Jarak Tersuai”?

Tambahkan nilai jarak khusus projek seperti spacing.18 atau spacing.128 pada tema untuk mengisi jurang dalam skala lalai. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Nilai Jarak Tersuai” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?

Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Menambah Warna Tersuai
Keluarga Fon Tersuai
Nilai Jarak Tersuai
Menggunakan Pemboleh Ubah CSS dalam Tailwind

← Kembali ke Tailwind CSS Academy