Cara menggunakan Tailwinds `safelist` untuk mengendalikan kelas dinamik

Tailwind CSS ialah rangka kerja CSS yang mengutamakan utiliti yang popular yang membolehkan pembangun mencipta reka bentuk tersuai dengan cepat dan cekap. Secara lalai, Tailwind CSS menjana pelbagai kelas utiliti, yang boleh membawa kepada saiz fail yang besar. Untuk menangani isu ini, Tailwind CSS dilengkapi dengan ciri terbina dalam yang dipanggil PurgeCSS yang mengalih keluar gaya yang tidak digunakan daripada binaan pengeluaran, menjadikan fail CSS akhir lebih kecil dan lebih berprestasi. Walau bagaimanapun, pengalihan keluar automatik ini kadangkala boleh menyebabkan isu apabila gaya tertentu digunakan secara dinamik atau bersyarat dalam aplikasi anda. Dalam artikel ini, kita akan mendalami ciri senarai selamat dalam CSS Tailwind, mempelajari cara menyenarai putih gaya tertentu dan meneroka pelbagai senario yang menggunakan senarai selamat boleh membantu.

1. Memahami PurgeCSS dalam Tailwind CSS

PurgeCSS ialah alat berkuasa yang mengimbas fail projek anda untuk sebarang nama kelas yang digunakan dan mengalih keluar nama kelas yang tidak digunakan daripada fail CSS terakhir. Ini mengurangkan dengan ketara saiz CSS yang dijana, menjadikan aplikasi anda dimuatkan dengan lebih cepat.

Secara lalai, Tailwind CSS menyertakan konfigurasi PurgeCSS yang mengimbas fail HTML, JavaScript dan Vue anda untuk sebarang nama kelas. Anda boleh mengubah suai fail yang diambil dalam tatasusunan kandungan fail konfigurasi dengan mudah.

Dalam sesetengah situasi, anda mungkin perlu menghalang gaya tertentu daripada dialih keluar, walaupun gaya itu tidak dikesan dalam fail anda. Di sinilah ciri senarai selamat dimainkan.

2. Memperkenalkan Safelist

Safelist ialah ciri dalam CSS Tailwind yang membolehkan anda menyenarai putih gaya tertentu supaya gaya tersebut tidak dialih keluar semasa proses pembersihan. Ini amat berguna apabila anda mempunyai nama kelas dinamik yang dijana melalui JavaScript atau digunakan berdasarkan interaksi pengguna. Satu lagi kes penggunaan yang sangat biasa untuk senarai selamat ialah apabila warna atau gaya didorong daripada rangka kerja CMS atau bahagian belakang. Satu contoh sedemikian mungkin sistem yang membenarkan pentadbir tapak web mengedit warna kategori dalam CMS, yang seterusnya mengubah warna item navigasi untuk kategori tersebut. Tailwind tidak akan melihat nama kelas sebenar kerana fail akan mengandungi kod sebelah pelayan yang mengeluarkan warna.

Dengan menambahkan nama kelas ini pada senarai selamat, anda memastikan bahawa ia akan sentiasa disertakan dalam fail CSS terakhir anda, tidak kira sama ada PurgeCSS boleh menemuinya dalam fail projek anda atau tidak.

3. Mengkonfigurasi Safelist dalam tailwind.config.js

Untuk mengkonfigurasi senarai selamat dalam projek CSS Tailwind anda, anda perlu mengubah suai fail tailwind.config.js. Senarai selamat ialah pelbagai nama kelas yang anda ingin simpan dalam fail CSS terakhir anda, walaupun ia tidak ditemui dalam fail projek anda. Berikut ialah contoh cara menambah nama kelas pada senarai selamat:

// tailwind.config.js
module.exports = {
  content: [
    // your content files here
  ],
  safelist: [
    'bg-red-500', 
    'text-white', 
    'hover:bg-red-700'
  ],  
  // other configurations
};

Dalam contoh ini, kelas bg-red-500, text-white dan hover:bg-red-700 ditambahkan pada senarai selamat. Kelas ini akan sentiasa disertakan dalam fail CSS terakhir anda, walaupun PurgeCSS tidak menemuinya dalam fail projek anda.

4. Konfigurasi yang lebih maju

Jika anda mempunyai banyak kelas untuk diurus dalam senarai selamat, mungkin disebabkan oleh pelbagai warna dan keperluan untuk menyokong varian/pengubah suai seperti :hover, :focus, :active dan dark: maka ia boleh menjadi sangat mencabar untuk diuruskan dengan cepat ini dalam senarai selamat. Senarai akan menjadi besar dengan cepat.

Di situlah corak masuk. Tailwind menyokong regex dalam senarai selamat:

safelist: [
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

Dengan 2 penyertaan ini kami menambah 12 kelas dengan berkesan. dari-{color}-200 dan ke-{color}-100, dengan {color} ialah semua warna dalam senarai. Ia menjadikannya lebih mudah untuk mengurus senarai. Ingat bahawa tailwind.config.js hanyalah fail JavaScript, jadi anda boleh mengurus pembolehubah di bahagian atas fail jika anda menguruskan senarai warna yang berulang dengan banyaknya.

Ia juga mungkin untuk mentakrifkan varian untuk semua dalam senarai tanpa perlu menyenaraikannya secara eksplisit dalam regex:

safelist: [
  {
    pattern: /text-(blue|green|indigo|pink|orange|rose)-(600|400)/,
    variants: ['hover'],
  },
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

5. Senaraikan Contoh dan Kes Penggunaan Selamat

Terdapat beberapa senario yang menggunakan ciri senarai selamat boleh membantu:

Nama kelas dinamik: Jika anda menjana nama kelas secara dinamik berdasarkan beberapa data atau input pengguna, PurgeCSS mungkin tidak mengesan kelas ini dan mengalih keluarnya daripada fail CSS terakhir. Dengan menambahkan kelas dinamik ini pada senarai selamat, anda boleh memastikan ia sentiasa tersedia dalam aplikasi anda.

// Example of a dynamic class name based on user input
const userInput = 'success'; // This value might come from an API or user input
const alertClass = `alert-${userInput}`;

// Generated class name: 'alert-success'

Dalam contoh ini, pembolehubah alertClass menjana nama kelas berdasarkan input pengguna atau data daripada API. Memandangkan PurgeCSS tidak dapat mengesan nama kelas dinamik ini, anda harus menambahkannya pada senarai selamat dalam fail tailwind.config.js anda.

Conditional styles: If you have styles that only apply under specific conditions, such as a dark mode or a mobile view, you can use the safelist to ensure those styles are always included in your final CSS file.

// Example of a conditional style based on a media query
@media (max-width: 767px) {
  .hidden-mobile {
    display: none;
  }
}

In this example, the hidden-mobile class is only applied when the viewport width is less than 768 pixels. Since this class might not be detected by PurgeCSS, you should add it to the safelist in your tailwind.config.js file.

6. Best Practices for Safelisting

When using the safelist feature in Tailwind CSS, keep the following best practices in mind:

• Only add classes to the safelist that are truly necessary. Adding too many classes can bloat your final CSS file and negate the benefits of PurgeCSS.
• If you have many dynamic class names or a complex application, consider using a function or regular expression to generate the safelist array. This can help keep your configuration cleaner and more maintainable.
• Test your production build to ensure that all required styles are included. This can help you catch any issues early on and avoid surprises when deploying your application.

Summary

The safelist feature in Tailwind CSS provides a powerful way to whitelist specific styles and ensure they are included in your final CSS file, even if they are not detected by PurgeCSS. By understanding how to configure the safelist and use it effectively in various scenarios, you can make your Tailwind CSS projects more robust and maintainable. Remember to follow best practices when using the safelist to ensure your final CSS file remains lean and performant.

Feel free to look over the Tailwind Docs on Safelist usage.

Atas ialah kandungan terperinci Cara menggunakan Tailwinds `safelist` untuk mengendalikan kelas dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!