به روز رسانی: از Tailwind CSS نسخه 2.1، موتور جدید Just-in-Time مستقیماً در خود Tailwind CSS ساخته شده است، بنابراین شما نیازی به آن ندارید. @tailwindcss/jit بسته در حال حاضر در مستندات بیشتر بیاموزید
یکی از سخت‌ترین محدودیت‌هایی که طی سال‌ها هنگام بهبود CSS Tailwind با آن روبرو بوده‌ایم، اندازه فایل تولید شده در حال توسعه است. با سفارشی‌سازی‌های کافی در فایل پیکربندی شما، CSS تولید شده می‌تواند به 10 مگابایت یا بیشتر برسد، و فقط آنقدر CSS وجود دارد که ابزارهای ساخت و حتی خود مرورگر به راحتی از عهده آن بر می‌آیند.
به همین دلیل، همیشه باید مراقب تغییرات گران قیمت فایل پیکربندی خود باشید، مانند افزودن بیش از حد نقاط شکست اضافی یا فعال کردن گزینه های اضافی مانند disabled یا focus-visible.
امروز برای به اشتراک گذاشتن پروژه جدیدی که روی آن کار می کنیم بسیار هیجان زده هستم که این ملاحظات را به گذشته تبدیل می کند: کامپایلر به موقع برای Tailwind CSS.
@tailwindcss/jit یک کتابخانه آزمایشی جدید است که تمام CSS شما را کامپایل می کند در صورت درخواست همانطور که فایل های قالب خود را به جای ایجاد کل شیوه نامه خود در جلو ایجاد می کنید.
این با مزایای بسیاری همراه است:
- زمان ساخت سریع رعد و برق. کامپایل Tailwind در ابتدا با استفاده از CLI ما 3 تا 8 ثانیه طول می‌کشد و در پروژه‌های بسته وب بیش از 30 تا 45 ثانیه طول می‌کشد، زیرا بسته وب با فایل‌های بزرگ CSS مشکل دارد. این کتابخانه می تواند حتی بزرگترین پروژه ها را در حدود 800 میلی ثانیه گردآوری کند (با بازسازی های تدریجی به سرعت 3 میلی ثانیه)مهم نیست که از چه ابزار ساختی استفاده می کنید.
- هر گزینه در خارج از جعبه فعال است. گزینه هایی مانند
focus-visible،active،disabledو بقیه معمولاً به دلیل ملاحظات اندازه فایل به طور پیش فرض فعال نیستند. از آنجایی که این کتابخانه به صورت درخواستی سبک‌ها را تولید می‌کند، می‌توانید هر زمان که بخواهید از هر گونه‌ای که می‌خواهید استفاده کنید. شما حتی می توانید آنها را مرتب کنیدsm:hover:active:disabled:opacity-75. هرگز دوباره گزینه های خود را پیکربندی نکنید. - ایجاد سبک های دلخواه بدون نوشتن CSS سفارشی. آیا تا به حال به مقداری فوق خاص نیاز داشته اید که بخشی از سیستم طراحی شما نباشد، مانند
top: -113pxبرای یک تصویر پس زمینه عجیب و غریب؟ از آنجایی که سبک‌ها بر اساس تقاضا تولید می‌شوند، می‌توانید به سادگی یک ابزار برای این کار در صورت نیاز با استفاده از نمادهای براکت مربع ایجاد کنید.top-[-113px]. همچنین با انواع مختلف کار می کندmd:top-[-113px]. - CSS شما در توسعه و تولید یکسان است. از آنجایی که استایل ها در صورت نیاز تولید می شوند، نیازی به پاکسازی سبک های استفاده نشده برای تولید ندارید، به این معنی که دقیقاً همان CSS را در همه محیط ها مشاهده می کنید. هرگز نگران پاک کردن تصادفی یک سبک مهم در تولید دوباره نباشید.
- عملکرد بهتر مرورگر در توسعه. از آنجایی که بیلدهای توسعه به اندازه بیلدهای تولیدی کوچک هستند، مرورگر مجبور نیست چندین مگابایت CSS از پیش تولید شده را تجزیه و مدیریت کند. در پروژه هایی با پیکربندی های بسیار توسعه یافته، این امر باعث می شود ابزارهای توسعه بسیار پاسخگوتر باشند.
امروز با نصب آن را امتحان کنید @tailwindcss/jit و آن را در پیکربندی PostCSS خود عوض کنید:
npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer// postcss.config.jsmodule.exports = { plugins: { "@tailwindcss/jit": {}, autoprefixer: {}, },};فعلاً آن را به‌عنوان یک کتابخانه جداگانه ارسال می‌کنیم، اما زمانی که تمام مشکلات را بررسی کردیم، آن را دوباره به کتابخانه بازمی‌گردانیم. tailwindcss در پشت یک گزینه پیکربندی قرار دارد و ما قصد داریم آن را به صورت پیش فرض در Tailwind CSS v3.0 در اواخر امسال قرار دهیم.
درباره پروژه در GitHub بیشتر بدانید، سپس نصب کنید
آن را بازی کنید، آن را خم کنید، بشکنید و به ما بگویید چه فکر می کنید!
آیا آماده هستید آن را امتحان کنید؟ شروع →
