Menggunakan Lapisan Kaskade CSS untuk Mengelola Gaya Kustom dalam Proyek Tailwind

Jika kelas utilitas hanya melakukan satu hal, kemungkinan besar Anda tidak ingin itu ditimpa oleh gaya apa pun yang berasal dari tempat lain. Salah satu pendekatan adalah dengan menggunakan !important untuk 100% yakin gaya akan diterapkan, terlepas dari konflik kekhususan.

File konfigurasi Tailwind memiliki !important opsi yang secara otomatis akan menambahkan !important untuk setiap kelas utilitas. Tidak ada salahnya menggunakan !important dengan cara ini, tetapi saat ini ada cara yang lebih baik untuk menangani kekhususan. Menggunakan Lapisan Kaskade CSS kita dapat menghindari pendekatan penggunaan yang berat !important.

Lapisan kaskade memungkinkan kita untuk mengelompokkan gaya ke dalam "lapisan". Prioritas lapisan selalu mengalahkan kekhususan pemilih. Kekhususan hanya penting di dalam setiap lapisan. Menetapkan urutan lapisan yang masuk akal membantu menghindari konflik gaya dan perang kekhususan. Itulah yang menjadikan CSS Cascade Layers alat yang hebat untuk mengelola gaya khusus bersama gaya dari kerangka kerja pihak ketiga, seperti Tailwind.

Sumber Tailwind .css file biasanya memulai sesuatu seperti ini:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

Mari kita lihat dokumen Tailwind resmi tentang arahan:

Directive adalah at-rules khusus Tailwind yang dapat Anda gunakan di CSS Anda yang menawarkan fungsionalitas khusus untuk proyek Tailwind CSS. Menggunakan @tailwind arahan untuk memasukkan Tailwind's base, components, utilities dan variants gaya ke dalam CSS Anda.

Dalam file CSS keluaran yang dibuat, penyetelan ulang CSS Tailwind — dikenal sebagai Pra-penerbangan — disertakan pertama sebagai bagian dari gaya dasar. Sisa base terdiri dari variabel CSS yang diperlukan agar Tailwind berfungsi. components adalah tempat bagi Anda untuk menambahkan kelas kustom Anda sendiri. Kelas utilitas apa pun yang Anda gunakan di markup Anda akan muncul berikutnya. Varian adalah gaya untuk hal-hal seperti status melayang dan fokus serta gaya responsif, yang akan muncul terakhir di file CSS yang dihasilkan.

Angin Belakang @layer Direktif

Yang membingungkan, Tailwind memilikinya sendiri @layer sintaksis. Artikel ini membahas tentang standar CSS, tetapi mari kita lihat sekilas versi Tailwind (yang dikompilasi dan tidak berakhir di CSS keluaran). Angin Belakang @layer direktif adalah cara untuk menyuntikkan gaya ekstra Anda sendiri ke bagian tertentu dari file CSS keluaran.

Misalnya, untuk menambahkan gaya Anda sendiri ke base gaya, Anda akan melakukan hal berikut:

@layer base {
  h1 {
    font-size: 30px;
  }
}

Grafik components layer kosong secara default — ini hanya tempat untuk meletakkan kelas Anda sendiri. Jika Anda melakukan sesuatu dengan cara Tailwind, Anda mungkin akan menggunakan @apply (walaupun pencipta Tailwind baru-baru ini disarankan untuk tidak melakukannya), tetapi Anda juga dapat menulis kelas dengan cara biasa:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

Standar CSS jauh lebih kuat. Mari kita kembali ke itu…

Menggunakan standar CSS @layer

Inilah cara kami dapat menulis ulang ini untuk menggunakan standar CSS @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

Tidak seperti direktif Tailwind, ini tidak dikompilasi. Mereka dipahami oleh browser. Faktanya, DevTools di Edge, Chrome, Safari, dan Firefox bahkan akan menunjukkan kepada Anda lapisan apa pun yang telah Anda tetapkan.

Anda dapat memiliki lapisan sebanyak yang Anda inginkan — dan beri nama apa pun yang Anda inginkan — tetapi dalam contoh ini, semua gaya kustom saya berada dalam satu lapisan (my-custom-styles). Baris pertama menetapkan urutan lapisan:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

Ini perlu disediakan di muka. Pastikan untuk menyertakan baris ini sebelum kode lain yang menggunakan @layer. Lapisan pertama dalam daftar adalah paling sedikit kuat, dan lapisan terakhir dalam daftar adalah paling kuat. Itu berarti tailwind-base adalah paling tidak kuat layer dan kode apa pun di dalamnya akan ditimpa oleh semua layer berikutnya. Itu juga berarti tailwind-utilities akan selalu mengalahkan gaya lainnya — terlepas dari urutan sumber atau kekhususan. (Utilitas dan varian bisa masuk ke lapisan terpisah, tetapi pengelola Tailwind akan memastikan varian selalu mengalahkan utilitas, selama Anda menyertakan varian di bawah arahan utilitas.)

Apa pun yang tidak ada di lapisan akan menimpa apa pun yang ada di lapisan (dengan satu pengecualian adalah gaya yang menggunakan !important). Jadi, Anda juga bisa memilih untuk pergi utilities dan variants di luar lapisan apa pun:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Apa yang sebenarnya membelikan kita ini? Ada banyak waktu ketika pemilih CSS tingkat lanjut sangat berguna. Ayo buat versi :focus-within yang hanya merespons fokus keyboard daripada klik mouse menggunakan :has pemilih (yang mendarat di Chrome 105). Ini akan menata elemen induk ketika salah satu anaknya menerima fokus. Tailwind 3.1 diperkenalkan varian khusus - mis <div class="[&:has(:focus-visible)]:outline-red-600"> — tetapi terkadang lebih mudah untuk menulis CSS:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

Katakanlah hanya dalam satu contoh kita ingin menimpa outline-color dari blue untuk sesuatu yang lain. Katakanlah elemen yang sedang kita kerjakan memiliki kedua kelas Tailwind .outline-red-600 dan milik kita sendiri .radio-container:has(:focus-visible) kelas:

<div class="outline-red-600 radio-container"> ... </div>

Yang outline-color akan menang?

Biasanya, spesifisitas yang lebih tinggi dari .radio-container:has(:focus-visible) berarti kelas Tailwind tidak berpengaruh — meskipun urutan sumbernya lebih rendah. Tapi, tidak seperti Tailwind @layer arahan yang bergantung pada urutan sumber, standar CSS @layer mengesampingkan kekhususan.

Akibatnya, kita dapat menggunakan penyeleksi kompleks dalam gaya kustom kita sendiri, tetapi tetap menggantinya dengan kelas utilitas Tailwind saat kita membutuhkannya — tanpa harus menggunakan cara yang berat. !important penggunaan untuk mendapatkan apa yang kita inginkan.