Cara Menggunakan Styling Utility (cn & pcn)
Utilitas styling ini membantu menggabungkan class Tailwind secara rapi menggunakancn, serta melakukan parsing class dengan prefix custom menggunakanpcn. Sangat berguna untuk membuat komponen UI yang fleksibel.
Utility cn()
Menggabungkan class Tailwind tanpa konflik.
Kode berhasil di copy!
cn adalah wrapper dari clsx + tailwind-merge. Tailwind-merge memastikan class ganda seperti p-2 dan p-4di-merge sehingga yang konflik akan digantikan oleh yang terakhir.
Utility pcn()
pcn digunakan untuk mengekstrak class berdasarkan prefix tertentu. Format class yang diparsing: prefix::class-name. Cocok untuk komponen UI yang ingin membagi class input, container, label, atau state tertentu.
Contoh Dasar
Memisahkan class berdasarkan prefix.
Kode berhasil di copy!
Prefix Dengan Pseudo Class
Mendukung pemisahan class berdasarkan pseudo class tertentu.
Kode berhasil di copy!
Penggunaan di Komponen UI
Kombinasi cn() dan pcn() untuk styling dinamis komponen.