Menyesuaikan CSS Tailwind – Memanjangkan Rangka Kerja

Dalam artikel ini, kami akan menyelami menyesuaikan Tailwind CSS agar sesuai dengan keperluan projek anda. Tailwind adalah fleksibel dan boleh dilanjutkan melebihi konfigurasi lalai, membolehkan anda mencipta sistem reka bentuk tersuai sepenuhnya.

---

1. Mengapa Sesuaikan Tailwind?

Secara lalai, Tailwind menyediakan pelbagai jenis kelas utiliti, tetapi kadangkala anda akan mahu melampaui apa yang tersedia. Anda boleh menambah warna, fon, nilai jarak dan juga titik putus anda sendiri, menjadikan Tailwind sesuai untuk sistem reka bentuk anda.

Contoh:

Anda mungkin mahu menggunakan warna khusus jenama atau fon tersuai dalam projek anda. Tailwind membolehkan anda mengkonfigurasi tetapan ini dengan mudah dalam fail konfigurasinya (tailwind.config.js).

---

2. Menyediakan Fail Tailwind Config

Setelah anda memasang Tailwind melalui npm, anda boleh mencipta fail konfigurasi dengan menjalankan:

npx tailwindcss init

Ini akan menjana fail tailwind.config.js di mana anda boleh menyesuaikan tetapan lalai Tailwind.

Contoh:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#5A67D8',
      },
      fontFamily: {
        custom: ['Open Sans', 'sans-serif'],
      },
    },
  },
}

Dalam contoh ini:

• Kami menambahkan warna tersuai (jenama) dan keluarga fon tersuai (tersuai).

---

3. Menambah Warna Tersuai dan Jarak

Tailwind membolehkan anda menentukan warna tersuai dan nilai jarak untuk dipadankan dengan keperluan reka bentuk projek anda. Anda boleh memanjangkan palet lalai atau menggantikannya sepenuhnya.

Contoh – Warna Tersuai:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',
        secondary: '#A78BFA',
      },
    },
  },
}

Kini anda boleh menggunakan warna ini dalam HTML anda:

<div class="bg-primary text-white">Custom Background</div>

Contoh – Jarak Tersuai:

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
}

Nilai jarak baharu ini kini boleh digunakan seperti ini:

<div class="mt-72">Extra Margin</div>

---

4. Menyesuaikan Titik Putus

Jika titik putus responsif lalai tidak menepati keperluan reka bentuk anda, anda boleh mengubah suai atau menambah titik putus baharu.

Contoh:

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px', // Adding a custom breakpoint
    },
  },
}

Kini anda boleh menggunakan gaya pada titik putus 3xl baharu.

---

5. Membersihkan CSS yang Tidak Digunakan

Tailwind boleh menjana banyak CSS, tetapi anda boleh mengurangkan saiz CSS pengeluaran anda dengan ketara dengan membersihkan gaya yang tidak digunakan. Tailwind mempunyai pilihan pembersihan terbina dalam yang mengalih keluar kelas yang tidak digunakan daripada fail CSS akhir anda.

Menyediakan Pembersihan:

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.js'],
}

Ini memastikan hanya kelas CSS yang digunakan dalam fail HTML dan JavaScript anda disertakan dalam binaan pengeluaran, menjadikan fail CSS akhir anda lebih kecil.

---

Kesimpulan

Memperibadikan Tailwind CSS membolehkan anda menyesuaikan rangka kerja dengan keperluan sebenar projek anda. Sama ada menambah warna tersuai, fon, jarak atau pun titik putus, Tailwind memberi anda kefleksibelan untuk mencipta sistem reka bentuk yang unik sambil masih memanfaatkan kuasa kelas utiliti yang diutamakan.

---

Ikuti saya di LinkedIn

Ridoy Hasan

Lawati laman web saya

Atas ialah kandungan terperinci Menyesuaikan CSS Tailwind – Memanjangkan Rangka Kerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!