Multi Adalah Tailwind Plugin yang Kita Inginkan

Dalam artikel ini, kita akan belajar cara membuat beberapa plugin di dalam Tailwind CSS. Hal ini sangat berguna ketika Anda memiliki banyak kasus penggunaan untuk satu selektor. Anda dapat melihat perbandingan sebelum dan sesudah di bawah ini:

<!-- Sebelum -->
<input type="text" class="border h-10 px-4 focus:outline-none focus:ring focus:ring-blue-500/20 focus:border-blue-500 transition">


<!-- Sesudah -->
<input type="text" class="border h-10 px-4 focus:multi-['outline-none;ring;ring-blue-500/20;border-blue-500'] transition">

Dapat dilihat bahwa versi "sesudah" lebih hemat dalam penggunaan kelas, yang pada akhirnya akan mengurangi ukuran file.

Langkah pertama adalah membuat plugin di dalam konfigurasi Tailwind. Berikut saya tunjukkan contoh dalam dua versi: JavaScript dan TypeScript. Anda dapat memilih sesuai dengan kebutuhan:

/** @type {import('tailwindcss').Config} */

module.exports = {
  plugins: [
    function ({ matchUtilities }) {
      matchUtilities({
        multi: (value) => {
          const escape = (str) => str.replace(/_/g, '\\_').replace(/ /g, '_')
          const delimiter = /;(?![^[]*\])/
          const utilities = value.slice(1, -1).split(delimiter).map(escape).join(' ')
          return !utilities.trim()
            ? {}
            : {
                [`@apply ${utilities}`]: {},
              }
        },
      })
    },
  ],
}

/** @type {import('tailwindcss').Config} */

module.exports = {
  plugins: [
    function ({ matchUtilities }: any) {
      matchUtilities({
        multi: (value: string) => {
          const escape = (str: string) => str.replace(/_/g, '\\_').replace(/ /g, '_')
          const delimiter = /;(?![^[]*\])/
          const utilities = value.slice(1, -1).split(delimiter).map(escape).join(' ')
          return !utilities.trim()
            ? {}
            : {
              [`@apply ${utilities}`]: {}
            }
        }
      })
    }
  ]
}

Dengan ini, Anda dapat menggunakan teknik yang telah dijelaskan di atas. Semoga ini membantu, dan sampai jumpa pada artikel berikutnya.