کتابخانه
@tailwindcss/browser نسخه مخصوص مرورگر تیلویند سی اس اس هست. با یه تگ اسکریپت ساده توی صفحه، کلاس های utility-first رو همون لحظه توی مرورگر به CSS تبدیل می کنه. برای نمونه سازی سریع، آموزش و تست ایده خوبه، چون نه Node می خواد و نه مرحله build.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۲۷۸ کیلوبایت· ۳ فایل· انتشار
SHA-256: a60c785630a06196808cbe79e6f7bdb4abcc8f4421a47b56f29338fc84805e3b
تیلویند سی اس اس یه فریم ورک utility-first هست. یعنی به جای اینکه برای هر دکمه و کارت یه کلاس اختصاصی بنویسی و یه فایل CSS جدا نگه داری، مستقیم توی HTML کلاس های کوچیک و آماده می ذاری، مثل flex و p-4 و text-center. معمولاً برای استفاده ازش باید Node و یه ابزار build نصب کنی. @tailwindcss/browser این مرحله رو حذف می کنه. یه اسکریپت به صفحه اضافه می کنی، کلاس ها رو می نویسی و خود اسکریپت توی مرورگر صفحه رو می خونه و CSS لازم رو می سازه.
این بسته به درد کسی می خوره که می خواد سریع یه طرح رو امتحان کنه. مثلاً یه ماکاپ HTML برای مشتری، یه صفحه آزمایشی، آموزش تیلویند به همکار یا تست یه ایده قبل از اینکه وارد پروژه اصلی بشی. اگه تازه با تیلویند آشنا شدی هم بدون دردسر راه اندازی می تونی با کلاس ها ور بری و ببینی هر کدوم چی کار می کنه.
برای سایت واقعی انتخاب مناسبی نیست. مستندات خود تیلویند هم این نسخه رو برای محیط توسعه معرفی می کنه. دلیلش اینه که CSS هر بار توی مرورگر بازدیدکننده ساخته می شه. این یعنی کار اضافه روی دستگاه کاربر، و ممکنه صفحه برای یه لحظه بی استایل دیده بشه. روی اینترنت ضعیف موبایل یا گوشی های قدیمی این فرق بیشتر حس می شه. برای سایت نهایی از روش build خود تیلویند استفاده کن و یه فایل CSS سبک و آماده تحویل بده.
یه نکته کاربردی دیگه: توی همین نسخه می تونی داخل یه تگ style با نوع text/tailwindcss تنظیمات تم رو با @theme بنویسی، مثلاً رنگ یا فونت دلخواهت. برای سایت فارسی dir رو روی rtl بذار و به جای ml و mr از کلاس های منطقی ms و me استفاده کن تا چینش با جهت متن جابه جا بشه.
یه مورد هم مربوط به شرایط خودمونه. اگه اسکریپت رو از یه CDN خارجی صدا بزنی، توی روزهای قطعی یا محدودیت اینترنت بین الملل ممکنه لود نشه و صفحه کاملاً بی استایل بالا بیاد. بهتره فایل رو روی هاست خودت بذاری. نسخه های رسمی و بدون تغییر این بسته توی مخزن داخلی ما هم هست و می تونی از همین جا برداری.
نصبش چند دقیقه بیشتر وقت نمی بره:
اگه سایت وردپرسی داری و فقط می خوای یه قالب یا صفحه رو تست کنی، اسکریپت رو توی محیط آزمایشی لود کن. قبل از انتشار روی سایت اصلی هم حتماً سراغ روش build برو و فقط CSS ساخته شده رو بارگذاری کن.
نصب معمولی تیلویند با ابزار build کار می کنه و آخرش یه فایل CSS آماده تحویل می ده که فقط کلاس های استفاده شده توی پروژه رو داره. @tailwindcss/browser همین کار رو توی مرورگر و موقع باز شدن صفحه انجام می ده. برای همین راه اندازیش سریع تره، ولی برای سایت نهایی مناسب نیست.
برای نمونه سازی، آموزش و تست مشکلی نداره. روی سایت واقعی توصیه نمی شه، چون CSS روی دستگاه هر بازدیدکننده ساخته می شه و ممکنه سرعت لود و ظاهر اولیه صفحه بدتر بشه. برای انتشار از روش build خود تیلویند استفاده کن و فقط فایل CSS نهایی رو تحویل بده.
اگه فایل رو روی هاست خودت بذاری، بله و به اینترنت بین الملل وابسته نیست. اگه اسکریپت رو از یه CDN خارجی صدا بزنی، ممکنه لود نشه و صفحه بی استایل بمونه. برای همین فایل رو از همین صفحه بگیر و روی هاست خودت بذار.
برای تست و ساخت سریع طرح می تونی اسکریپت رو توی قالب یا یه صفحه آزمایشی لود کنی. برای سایت وردپرسی که بازدید واقعی داره، بهتره CSS رو با روش build بسازی و فقط همون فایل نهایی رو توی قالب بارگذاری کنی.
مشکلی نداره. dir رو روی rtl بذار و به جای ml و mr از کلاس های منطقی ms و me استفاده کن تا فاصله ها با جهت متن جابه جا بشن. اگه فقط بخشی از صفحه راست به چپه، از متغیر rtl هم می تونی کمک بگیری. فونت فارسی دلخواهت رو هم توی تنظیمات تم تعریف کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.