Tidak Suka dengan salah satu Class TailwindCSS? Disable Saja

Saya mulai kesal dengan TailwindCSS. Framework yang terkenal dengan konsep utility-first class ini awalnya menghasilkan file build yang lebih kecil dan efisien, entah kenapa mulai tidak efisien lagi.

Puncak kekesalan saya muncul saat mendesain template AMP. Seperti yang kalian tahu, halaman khusus AMP sangat dibatasi oleh Google. Misalnya, untuk style CSS, Google membatasi hingga 75 KB dan harus ditempel di dalam head dokumen HTML.

Membuat template AMP dengan output CSS yang minimalis sangat cocok menggunakan TailwindCSS. Sebab, framework ini biasanya hanya menghasilkan CSS yang benar-benar dipakai dalam theme. Namun, entah kenapa, template AMP yang sangat sederhana justru menghasilkan file built sebesar 45 KB dengan TailwindCSS.

Lihat saja demo Amplate - Free HTML AMP Template build with TailwindCSS.

Memang masih di bawah ambang batas inline CSS template AMP maksimal 75 KB. Tapi, akan lebih baik jika CSS AMP tidak lebih dari 20 KB. Saya heran, kenapa class utility TailwindCSS mulai gemuk, padahal desain template sangat sederhana.

Pada saat proses development, CSS yang digenerate Tailwind menghasilkan CSS yang tidak saya panggil seperti class: filter, background-attachment, border-end-start-radius, backdrop-invert place-self, backdrop-filter, mix-blend-mode dan beberapa css lain yang jarang saya pakai.

Anda bisa melihat struktur code template di codepen.io/fauzanmy/pen/WNqNwoZ dan bandingkan dengan screenshoot style css yang dihasilkan TailwindCSS berikut:

Kemungkinan, versi TailwindCSS yang terakhir saya instal memiliki bug pada salah satu modulnya.

Bagaimana cara menonaktifkan class TailwindCSS yang tidak kita inginkan?

Secara default, TailwindCSS menyertakan base style yang disebut preflight. Ini otomatis di generate tampa ada pemanggilan class di dalam file HTML.

Preflight TailwindCSS adalah reset CSS untuk menormalkan tampilan elemen HTML di berbagai browser. Karena setiap browser memiliki style bawaan sendiri, perlu mereset atau menormalisasi sehingga tampilan akan seragam di semua browser.

Jika tidak suka dengan reset CSS preflight bawaan TailwindCSS yang terlalu panjang, kita bisa menonaktifkannya. Kemudian bisa menggantinya dengan reset CSS lain seperti Eric Meyer, normalize.css, sanitize.css, atau reset CSS yang super simple seperti ini:

@layer base {

  /* Super simple CSS Reset */

  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

}

Disinilah salah satu kelebihan framework TailwindCSS, setiap grup class utility dibuat secara modular, sehingga memudahkan pengguna untuk menonaktifkan komponen yang tidak dibutuhkan.

Lalu, bagaimana cara menonaktifkan class TailwindCSS yang tidak kita inginkan, termasuk class preflight?

Cukup edit file konfigurasi TailwindCSS dengan menambakan kode konfigurasi preflight: false, di dalam file tailwind.config.js:

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

module.exports = {
  content: ["./**/*.{html,js}"],
  corePlugins: [
    preflight: false,
  ],
}

Saya sendiri jarang mendisable clasa reset preflight bawaan TailwindCSS.

Yang sering saya disable adalah class container.

Class .container TailwindCSS secara otomatis menjadi class default. Dipakai atau tidak, tetap di-generate. Karena saya tidak pernah memakai class container, saya disable saja. Lumayan bisa menghemat beberapa byte.

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

module.exports = {
  content: ["./**/*.{html,js}"],
  corePlugins: [
    container: false,
  ],
}

Kembali ke kasus template AMP yang hasil build CSS terlalu besar. Untuk itu, saya bisa menonaktifkan banyal module CSS dari core plugin TailwindCSS secara berjamaah.

Caranya, buka tailwindcss.com/docs/configuration lalu cari class yang tidak diinginkan, masukan ke dalam list false.

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

module.exports = {
  content: ["./**/*.{html,js}"],
  corePlugins: [
    backdropInvert: false,
    backdropSaturate: false,
    backdropSepia: false,
    backgroundAttachment: false,
    backgroundBlendMode: false,
    container: false,
    filter: false,
    grayscale: false,
    invert: false,
    mixBlendMode: false,
  ],
}

Dengan cara men-disable class TailwindCSS via core plugins satu per satu bisa menjadi solusi sementara, tapi sangat ribet untuk proyek-proyek berikutnya.

Alternatif lain, bersambung ke artikel berikutnya: Tidak suka dengan konsep utility-first framework TailwindCSS? Gunakan mesin CSS On-demand dari UnoCSS.