‏cn؛ موتور تازهٔ ادغام کلاس‌های Tailwind

پکیج cn که shadcn و Aiden Bai ساختنش، کار دو کتابخونهٔ آشنای دنیای Tailwind رو یکجا انجام می‌ده: clsx که کلاس‌ها رو شرطی به هم می‌چسبونه، و tailwind-merge که تداخل‌ها رو حل می‌کنه (یعنی وقتی px-2 و px-4 کنار هم میان، آخری برنده بشه). تیم سازنده می‌گه API و خروجی دقیقاً همونه، پس یه drop-in replacement حساب می‌شه و لازم نیست shadcn/ui داشته باشی.

حرف اصلی مقاله سرعته. توی رایج‌ترین شکل فراخوانی، یعنی یه کلاس پایه به‌علاوهٔ واریانت و یه کلاس شرطی، زمان از حدود ۳۲۰ نانوثانیه به ۱۰ نانوثانیه رسیده. روی مجموعهٔ کلاس‌های تکراری یه ریپوی واقعی، فاصله تا ۱۷۲ برابر هم می‌ره بالا. تیم سازنده ۱۴۴٬۲۶۵ فراخوانی واقعی رو از ۵۸ پروژهٔ متن‌باز بیرون کشیده و میانگین هندسی سرعت رو ۳۷ برابر گزارش کرده.

شکل استفاده هیچ فرقی با قبل نداره:

import { cn } from "cn"

cn("px-2 py-1", isActive && "bg-blue-500", { "text-white": isActive })

ترفندش هم همینجاست: cn دنبالهٔ فراخوانی‌های تکراری رو یاد می‌گیره، پس توی یه حلقهٔ رندر فقط هویت آرگومان‌ها رو چک می‌کنه و کل کار رو رد می‌کنه.

مهاجرت با npx shadcn@latest migrate cn انجام می‌شه، یا دستی با عوض کردن wrapper توی lib/utils.ts. پکیج صفر وابستگی داره، ۲۶ کیلوبایت minified هست و با React و Vue و Svelte و Solid و Astro و حتی تمپلیت‌های سمت سرور کار می‌کنه. تنظیمات سفارشی هم از cn/config با همون شکل { extend, override, prefix } میاد.

دو تا نکتهٔ مهم قبل از مهاجرت: cn فقط Tailwind v4 رو پشتیبانی می‌کنه و روی v3 باید با tailwind-merge v2 موند، و CLI‌اش Node 20 به بالا می‌خواد. سازگاری خروجی با ۳۵۶ هزار تست تفاضلی چک شده و تنها موردی که پشتیبانی نداره experimentalParseClassName هست.

نکات کلیدی:

• cn جایگزین مستقیم clsx و tailwind-merge با همون API و همون خروجی
• ۳۰ برابر سریع‌تر توی رایج‌ترین فراخوانی (۳۲۰ns به ۱۰ns) و ۳۷ برابر میانگین هندسی روی ۵۸ ریپوی واقعی
• صفر وابستگی، ۲۶ کیلوبایت minified، مستقل از فریم‌ورک
• فقط Tailwind v4؛ روی v3 باید با tailwind-merge v2 موند
• مهاجرت با npx shadcn@latest migrate cn