نوشته های شایان بمانیان

فرق دیتا‌تایپ های primitive و non-primitive در JS

شایان بمانیان — Thu, 19 Nov 2020 22:45:11 +0330

سلام! دوماهی شد که پست جدید نذاشتم و همچنان جهان از شر کرونا راحت نشده! امیدوارم حال شما و عزیزانتون خوب باشه و همگی سلامت باشیم.خب این پستی که امروز درنظر گرفتم بذارم درباره دیتاتایپ ها در جاوا اسکریپت هست که به دو دسته کلی تقسیم میشن. نوع اول primitive و نوع دوم non-primitive. خب اول بریم ببینیم که اصلا یعنی چی و به‌حال ما چه فرقی میکنه!طبق تعریف MDN دیتاتایپ های primitive دیتا هایی هستن که «آبجکت» نیستن و هیچ «متدی» ندارن.خب پس باتوجه به تعریف بالا دیتاتایپ های primitive عبارتند از:Boolean, Number, String, Bigint, Symbol, undefinedو دیتاتایپ های non-primitive همون آبجکت‌ها هستن (که شامل فانکشن‌ها، آرایه‌ها و Date هم میشن)خب! پس تا اینجا دیتاتایپ‌ها رو شناختیم و تفکیک کردیم، حالا بریم ببینیم که چرا لازمه ما این موضوع رو بدونیم.۱) اینکه دیتاتایپ های primitve درواقع immutable هستن. توضیحش رو با یک مثال ببینید:let myString = "test" myString[0] = "T" console.log(myString) // output: testخب ولی شاید براتون سوال پیش بیاد! میگید که من میتونم مقدارش رو عوض کنم که! اینجوری:let myString = "test" myString = "hello world" console.log(myString) // output: hello worldاینجا میایم میگیم بله، حق با شماست ولی عوض کردن (replace) کردن مقدار و mutate کردن متفاوت هستن. پس ما میتونیم replace کنیم ولی نمیتونیم mutate کنیم.۲) فرض کنیم دوتا آرایه داریم مثل زیر:const a = [1, 2, 3] const b = [1, 2, 3]بنظر شما جواب تساوی زیر چی میشه؟a === bتوی پرانتز بگم که تفاوت دو مساوی (==) و سه مساوی (===) در جی‌اس رو اگر نمیدونید این مقاله رو بخونید.برگردیم به جواب بالایی! و بله جوابش چیزی نیست جز false! چرا؟ چون توی دیتا‌تایپ های non-primitive ما همیشه جواب مقایسه های از این نوع‌مون false میشه. بازم چرا؟ چون متغیر a توی یک خونه از حافظه ذخیره شده و متغیر b در یک خونه دیگه. پس جواب false میشه.به اسکرین‌شات زیر توجه کنید:اینجا ما b رو مساوی a قرار دادیم پس یعنی جفتشون دارن به یک خونه از حافظه اشاره میکنن. در نتیجه وقتی توی b مقدار ۴ رو پوش کردیم، مقدار ۴ به a هم اضافه شده.و حالا یه اسکرین‌شات دیگه:اینجا ما در واقع اومدیم یه کلون از a ساختیم یعنی درواقع اصلا مقادیر آرایه a رو برداشتیم‌ (به خونه حافظه‌ش کاری نداشتیم) و آرایه جدید b رو ساختیم و مقادیر رو گذاشتیم داخلش، پس اگر توی b مقدار ۴ رو پوش کنیم توی a تغییری ایجاد نمیشه.خب این کل مطلبی بود که میخواستم توی این پست بگم! امیدوارم براتون مفید بوده باشه.مثل همیشه خوشحال میشم نظرات و پیشنهاداتون رو توی قسمت کامنت ها با من به اشتراک بگذارید.

هندل کردن فرم ها به روش Formik

شایان بمانیان — Sat, 19 Sep 2020 17:47:44 +0430

سلام! امیدوارم که حالتون خوب باشه و از نظر جسم و روح در سلامت کامل باشید.توی این پست قراره یه چیزی شبیه Formik (البته ساده‌تر) بسازیم. ساختن این برای خودم جذاب بود، امیدوارم برای شماهم همینطور باشه.خب اول از بریم ببینیم Formik چطور کار میکنه. اینجا آموزش استفاده‌ش رو گذاشته.اولین مثالی که زده این هست. اسکرین شات از کدش رو اینجا میذارم که راحت‌تر بشه بررسی کنیم.خب از بالا به پایین که حرکت کنیم میبینیم یک هوک به اسم useFormik داریم که همه کار رو هندل میکنه.داخلش یک initialValues داده و یک فانکشن on Submit پایین‌تر توی تگ form برای on Submit از formik.handleSubmit استفاده کرده. و داخل تگ input برای on Change از formik.handleChange و برای value از formik.values.email استفاده کرده.پس خروجی هایی که ما از formik میگیریم به این صورت هست: handle Change, handle Submit, valuesپس ما هم باید یک هوک بسازیم که این خروجی هارو داشته باشه. وب‌سایت خود ری‌اکت این راهنما رو برای ساخت هوک دلخواه داره.من اسم هوک رو میذارم useForm و یک ساختار کلی به صورت زیر میشه.handleForm . jsپارامتر formCustomValues رو به عنوان آبجکتی درنظر میگیریم که initialValues رو میگیره و پارامتر formSubmitFunction رو آبجکتی که رو درنظر میگیره.برای هندل کردن فرم ها در ری‌اکت به صورت controlled component ما نیاز به یک state (که شامل value و name فیلد ما هست) و یک handleChange داریم. اگر درباره این موضوع نمیدونید، این صفحه رو ببینید. خب پس بیایم این هارو وارد useForm کنیم.* نکته: به formCustomValues و formSubmitFunction یک آبجکت خالی به عنوان مقدار اولیه بدین.اینجا initialValues رو که توی کامپوننت مشخص کردیم رو میگیریم و میذاریمش توی state.متد handle Change واضحه پس توضیح خاصی نداره، فقط بگم که یک ورودی event میگیره که من اون رو destructure کردم و متد currentTarget رو از event گرفتم و renameش کردم به input برای استفاده ساده‌تر.توی return هم که value داخل state رو برمیگردونیم. پس تا اینجا values و handle Change رو ساختیم.بریم سراغ handleSubmit.خب همونطور که توی کد Formik دیدم یک مقدار on Submit رو هم پاس میدیم داخل هوک‌مون.پس کد ما تا اینجا به این صورت میشه:خب! بنظر میاد تا اینجا هوک ما کامل شده! بریم پس تستش کنیم. کد زیر رو به عنوان مثال مینویسیم:خب! بنظر میاد که همه چیز به خوبی کار میکنه! تبریک میگم الان یک هوک ساده در عین حال کاربردی برای هندل کردن فرم ها داریم که کار مارو خیلی سریع‌تر میکنه و حجم خیلی کمی داره!من توی تایم آزادم امکان validation رو هم به این هوک استفاده کردم که کدش رو از اینجا میتونید ببینید.من اینجا از برای validation از Joi استفاده کردم (مثال استفاده شده) اما این قابلیت رو هم داره که مثل این خودتون به صورت دستی براش validation بنویسید. (اگر واضح نبود حتما پیام بدید)اگر درخواست باشه میتونم این رو تو یه پست دیگه کامل توضیحش بدم، توی این پست سعی کردم کد رو خلوت‌ نگه‌دارم.ممنون از وقتی که گذاشتید و این پست رو مطالعه کردید. امیدوارم براتون مفید بوده باشه.

هندل کردن فرم ها در ری‌اکت (روش متفاوت)

شایان بمانیان — Tue, 08 Sep 2020 11:43:27 +0430

سلام! امیدوارم که حالتون خوب باشه و از نظر جسم و روح در سلامت کامل باشید.موضوع این پست شاید تکراری بنظر بیاد ولی اینطور نیست. من کلا سعی میکنم از نوشتن موضوعاتی که خیلی تکراری هستن دوری کنم.اگر نمیدونید چطور فرم ها در ری‌اکت کار میکنن به اینجا سر بزنید.توی این پست، میخوام یه روش برای هندل کردن فرم ها بدون نیاز به استیت (یعنی به صورت uncontrolled) بگم. در پست بعدی باهم یه کاستوم هوک شبیه Formik میسازم!اولین نکته ای که باید بهش اشاره کنم این هست که هندل کردن فرم ها به روش uncontrolled یکسری معایب و مزایا داره اما بسته به استفاده شما فرق میکنه، گاهی پروژه ای دارید که نیازی به اون قابلیت ها ندارید و مزایاش (مثلا پرفورمنس) براتون مهم‌تر هست.برای اطلاعات بیشتر اینجا رو ببینیددیگه بریم سراغ کد!من برای validation از Joi استفاده میکنم ولی شما میتونید از Yup هم استفاده کنید.پیشنهاد: داخل src پروژتون یک فولد با نام utils ایجاد کنید و این فایل رو اونجا قرار بدید.یک فایل به نام handleForms بسازید و داخلش اینطور عمل می‌کنیم (همونطور که در vanilla js عمل می‌کنیم)handleForms.jsخب حالا سمت کامپوننت هامون اونجایی که میخوایم فرم داشته باشیم اینطور می‌نویسیم:VirgoolForm.jsاینجا چندین تا input داریم و اگر submit کنیم میبینیم که به راحتی اطلاعات داخل فرم هارو توی کنسول داریم.حالا بریم validation اضافه کنیم.داخل VirgoolForm رو به این صورت تغییر میدیم:تغییراتی که ایجاد کردیم رو بررسی کنیم. از بالا به پایین اول، Joi رو ایمپورت کردیم. یک مدل یا schema برای فرممون نوشتیم. برای اطلاع از متد های schema اینجا رو ببینید.تغییر بعدی داخل فانکشن handleSubmit هست که بخاطر validation اینکارو کردیم. (میتونید روش متفاوتی رو پیش بگیرید)و حالا فایل handleForm رو باز کنید و به صورت زیر تغییرش بدید:اینجا formValues رو با schema مقایسه میکنیم و اگر مشکلی بود ارور رو throw میکنیم. (شما میتونید return کنید که دیگه از try و catch استفاده نکنید)درباره معایب این روش گفتم اما مزایا این روش:استفاده ساده توسعه ساده فرمعدم re-render به دلیل استفاده نکردن از stateاستفاده نکردن از handleChange و valueممنونم از اینکه وقت گذاشتید و مطالعه کردید! امیدوارم بتونید ازش استفاده مفید رو ببرید.خیلی خوشحال میشم اگر نظراتتون یا تجربه هاتون در این زمینه رو با من توی قسمت کامنت ها به اشتراک بگذارید. این پست انگیزه نوشتن این ویرگول رو برای من ایجاد کرد.منتظر قسمت دوم باشید!

سه دیزاین پترن در ری‌اکت [قسمت سوم]

شایان بمانیان — Sat, 05 Sep 2020 00:05:31 +0430

سلام! مثل همیشه امیدوارم حالتون خوب باشه. این پست آخر از مجموعه سه‌تایی از دیزاین پترن های ری‌اکت هست. قسمت اول و دوم رو اینجا پیدا کنید.Render Propsخب خیلی سریع بریم ببینیم چی هست. با مثال شروع میکنم. فرض کنید میخوایم یه لیست از پست ها رو نشون بدیم خب مراحلش خیلی سادست! اول یک GET ریکویست میزنیم، بعد یک اسپینر برای لود دیتا نشون میدیم و در آخر اگر اروری نداشته باشیم محتوا رو نمایش میدیم. پس اگر بخوام به صورت مرحله به مرحله بنویسم اینجوری میشه:1- GET from API2- Show Loading3- !error && render dataخب حالا لیست پست ها رو گرفتیم! الان فرض کنید یه لیست نظرات رو میخوایم. خب تو این شرایط میگیم که ما کد رو تکرار نمیکنم!? پس میایم کامنت یا محتوا رو به صورت props پاس میدیم تو کامپوننت، اینجوری: هاها! ایول خب پس تا اینجا رو خوب پیش رفتیم.حالا فرض کنید میخوایم پروفایل یوزر رو نمایش بدیم! اینجاس که یکم ناراحت میشیم... چون شیوه نمایش یوزرپروفایل با کامنت ها یا پست ها کاملا متفاوته، اما روندش همونه اول GET بعد Loading و بعد اگر ارور نبود یوزرپرفایل!خب اینجا اگر باز بریم سمت props کامپوننت ما خیلی خیلی بزرگ میشه و پر از if که اصلا قابل خوندن نیست و نمیشه جاهای مختلف دوباره ازش استفاده کرد. اسپاگتی کد خالص!اینجاس که راه حل ما میاد، رندر پراپس! رندر پراپس چیه؟ به صورت تئوری میگیم «یک تکنیک برای اشتراک‌گذاری کد بین کامپوننت های ری‌اکت»در واقع اینطوری کار میکنه:ما یه پراپ با نام render پاس میدیم تو Component (با render پیش‌فرض ری‌اکت اشتباه نگیرید)خب طبق نام‌گذاری رسمی اسم کامپوننتی که اون سه تا کاری که تاحالا گفتیم رو انجام میده رو میذاریم Resource و داخل کامپوننت Resource برای مثال اینطور میشه:Resource.jsاینجا توی Resource میایم لاجیکمون رو انجام میدیم و اطلاعاتش رو میدیم به render propو اینطوری ازش استفاده میکنیم:و بله! اینطوری میتونیم از تکرار اضافی پرهیز کنیم. data رو میگیریم و هرطور که بخوایم نمایش میدیم.دلایلی که بهتره از render props استفاده کنیم:۱) بسیار خوانا و واضح هستن۲) لاجیک از نمایش جدا کردیم (لاجیک فقط توی Resource میمونه و دیگه کاری بهش نداریم!)۳) قابلیت توسعه بالا۴) قابل استفاده مجدددر آخر پیشنهاد میکنم با اینکه این روش بسیار خوبی هست اما اول کدتون به همون روال عادی بزنید، بعد مثلا اگر دیدید که چهار یا پنج بار دارید پترن GET, Loading, Present رو تکرار میکنید کدتون رو ریفکتور کنید و این متد رو پیاده کنید.این روش برای من بسیار جذاب و کاربردی بوده، امیدوارم که برای شما هم همینطور بوده باشه.اگر از این روش استفاده کردید تجربه‌تون رو توی کامنت ها با من به اشتراک بگذارید و یا اگر پیشنهادی دارید من مشتاقانه منتظرش هستم!ممنون که وقت گذاشتید و مطالعه کردید.

سه دیزاین پترن در ری‌اکت [قسمت دوم]

شایان بمانیان — Sat, 15 Aug 2020 09:38:50 +0430

سلام، امیدوارم حالتون خوب باشه و اوضاع بر وفق مراد!تو قسمت اول به Context API اشاره کردیم و مختصر توضیحی دادم. توی قسمت دوم میریم سراغ یک دیزاین پترن دیگه، امیدوارم براتون کاربردی باشه.Presentation / Container Componentsبا یک مثال شروع میکنم. فرض کنید یک کامپوننت داریم که وظیفه‌ش گرفتن و نمایش دادن یک‌سری داده هست. راه‌حلی که همه ما در نگاه اول انجام میدیم این هستش که میگیم خب! یه فایل باز میکنم، بالاش یه useEffect یا componentDidMount میزنم و دیتا رو میگیرم و پایینش redner میکنم. اما وقتی که بخوایم این کامپوننت رو گسترش بدیم اوضاع دیگه اونقدر قشنگ نیست!حتما شما هم با این مشکل برخورد کردید که توی پروژه یک‌سری کامپوننت دارین که اصلا میترسین بازش کنین! انقدر شلوغ و بزرگ شده (ناخوانا) که اگر یه تغییر کوچک بدین صفحه نه‌چندان زیبای قرمز ارور رو میبینین.راه حلی که امروز میخوام بگم راه‌حل پیشنهادی Dan Abramov برای این موقعیت ها هست. میگه که یک کامپوننت رو به دو کامپوننت تبدیل کنیم. یکی برای لاجیک (Container) و... یکی هم برای صرفا نمایش داده ها (Presentation). اینطوری کد ما چندین لول خواناتر میشه و کار کردن باهاش بسیار ساده‌تر.مثال رو ببینیم:اینجا یک کامپوننت داریم که از روی کد واضحه توش چه خبره. حالا پیشنهاد جناب Dan اینه که این رو به صورت زیر تبدیل کنیم:توجه داشته باشید که اسم پیشنهادی برای کامپوننت هایی که توشون لاجیک داریم به این صورته:ComponentName + Containerکه اینجا ما WeatherWidgetContainer رو داریم. و اسم کامپوننتی که فقط مسئول نمایش داده ها هست همون WeatherWidget خالی باقی میمونه و داخل به این صورت میشه:به همین سادگی کدهای میتونیم کد هایی بنویسیم که: - خواناتر هستن - راحت‌تر دیباگ میشن - قابلیت استفاده شدن مجدد رو دارن - قابلیت تست شدن دارن (اتومیشن تست منظور هست)ممنون که وقت ارزشمندتتون رو گذاشتید و این مقاله رو مطالعه کردید. خیلی خوشحال میشم اگر نظرتون رو برام بنویسید.منتظر قسمت سوم که بنظر خودم از همشون هیجان‌انگیزتره باشید.

سه دیزا‌ین پترن در ری‌اکت [قسمت اول]

شایان بمانیان — Thu, 06 Aug 2020 01:31:42 +0430

سلام! امیدوارم که حال همه خوب باشه در سلامت کامل باشیم. توی این پست میخوام درباره سه تا دیزاین پترن توی ری‌اکت بنویسم که شاید بعضیش رو دیده باشید شاید هم نه.اول از همه بریم سراغ تعریف دیزاین پترن: «راه حل های مشخص برای ایرادات رایج در برنامه‌نویسی»پس یعنی اگر شما هم تاحالا چند خطی ری‌اکت نوشته باشید، با این مشکلات رو به رو شدین!Context APIخب اول از همه بگم که احتمالا خیلی هامون با Context API آشنا هستیم و ازش استفاده می‌کنیم، اگر شماهم جزو این دسته هستید، میتونید دو مورد بعدی رو چک کنید.شاید براتون جالب باشه که Context API از مدت ها پیش در ری‌اکت بوده اما خب شاید توجه کافی به اون نمی‌شده.خب بریم ببینیم چه زمانی می‌تونیم از این دیزاین پترن استفاده کنیم! فرض کنید چندین کامپوننت تو در تو داشته باشیم، مثلا کامپوننت داشبورد رو در نظر بگیرید، داخلش کامپوننت پست داریم که داخل اون کامپوننت کامنت داریم. فرض کنیم می‌خوایم که یک prop از داشبورد به کامپوننت کامنت بدیم. اینجا باید اول prop رو بدیم به کامپوننت پست (که شاید اصلا کامپوننت پست از این prop استفاده نکنه) و بعدش بدیم به کامپوننت کامنت!شاید مثال من به اندازه کافی ترسناک نباشه اما فرض کنید همینطور چندین کامپوننت تو در تو داشته باشیم و برای انتقال داده از فقط از props استفاده کنیم! (به این کار Prop Drilling میگن)شاید برای حل این مشکل فکر کنید که ریداکس این مشکل رو حل میکنه. اما ریداکس پیچیدگی های خودش رو داره و شاید پروژه ما کوچک باشه و اصلا نیازی به استفاده از ریداکس نداشته باشه.اینجاس که Context API وارد میشه! اینجا با دوتا کامپوننت کلیدی سر و کار داریم. یکی Provider و دیگری Consumerدر اصل Provider شامل یک سری داده هست که ما همه جا بهش دسترسی داریم.و Consumer به داده های داخل Provider ما دسترسی داره.اگر بخوایم در یک نگاه این کامپوننت هارو داشته باشیم، به صورت این میشه:خب حالا برگردیم به همون مثالی که بالاتر گفته بودم و سعی کنیم با Context API حلش کنیم!اینجا باید توجه داشته باشیم که کامپوننت Provider، کامپوننت Dashboard مارو در بر بگیره. و بله! میبینم که به سادگی تونستیم از داده مورد نظرمون رو به سادگی انتقال بدیم!ممنون از اینکه وقت گذاشتید و مطالعه کردید. خوشحال میشم نظرتون رو بهم بگید. منتظر قسمت دوم باشید!برگرفته از Kent C. Dodds

آشنایی با فریم‌ورک tailwindcss

شایان بمانیان — Sun, 02 Aug 2020 12:55:27 +0430

سلام، توی این پست قصد دارم اشاره ای به فریم‌ورک tailwindcss که نسبتا تازه‌س ولی حسابی معروف شده داشته باشم. در این پست یک سری ستاپ اولیه و بویلر‌پلیت هاش رو میگم تا باهاش راحت‌تر کار کنیم.برای اینکه با شیوه کدنویسی در این فریم‌ورک آشنا بشیم، بریم برای مثال دکمه های Log in و Sign up (مشابه توییتر) رو باهاش بسازیم:دکمه های توییتر ساخته شده با tailwindcssکد دکمه های بالا به این صورت هست:خب! همونطور که میبینید در اصل tailwindcss به ادعای خودش utility-first هست، در واقع اگر داخل class رو نگاه کنیم، کلی اجزا میبینیم (مثلا py-1 در جهت محور y ها به اندازه 0.25rem به ما padding میده) که با گذاشتنشون کنار هم تونستیم این button هارو بسازیم. (اگر متوجه بقیه class ها نمیشید اصلا نگران نباشید، چون واقعا ساده‌س! یه سر به اینجا بزنید و جواب سوالاتتون رو بگیرید)* اگر از vscode استفاده می‌کنید اکستنشن tailwindcss رو حتما نصب کنید.این فریم‌ورک شاید سریع‌ترین نباشه اما با توجه به میزان شخصی‌سازی که می‌تونید انجام بدید قطعا از نوشتن css از صفر بسیار سریع‌تر هست.یکی از مزیت های این فریم‌ورک این هستش که چون فقط شامل css هست میشه، می‌تونید در پروژه های React یا Vue ازش استفاده کنید.حتما این سوال براتون پیش میاد که فرق این با inline-css که قبلا می‌نوشتیم چیه؟ اگر بخوایم یه button رو چندجا استفاده کنیم، باید کل کلاس هارو دوباره تکرار کنیم؟جواب سوال نه هستش! با استفاده از @apply میتونیم کامپوننت خودمون رو اکسپورت کنیم، به این صورت:برای اطلاعات بیشتر به داکیومنتیشن خیلی خوبش مراجعه کنید.برای ستاپ کردن این فریم‌ورک دوست داشتی چند قدم کوتاه هست که باید انجام بدیم.اول از همه tailwindcss چون یک پکیج npm هست، بعد از ساختن فولدر جدید باید به ترمینال بریم و کد زیر رو توی همون فولدر اجرا کنیم:npm initحالا باید tailwindcss رو اینستال کنیم، اما قبلش باید بگم که برای اینکه tailwind کامل کار کنه، دوتا پکیج دیگه هم لازم داریم! یکی postcss-cli و دیگری autoprefixer هست. پس به این صورت عمل می‌کنیم:npm i tailwindcss postcss-cli autoprefixerحالا باید فایل کانفیگ tailwindcss رو بیاریم داخل پروژه:npx tailwind initحالا باید فایل کانفیگ postcss بسازیم، پس توی همون root فولدر یه فایل به صورت زیر بسازید:postcss.config.jsmodule.exports = { plugins: [ require("tailwindcss"), require("autoprefixer") ] }از اونجایی که این فریم‌ورک از چند بخش تشکیل شده، برای اینکه انتخاب کنیم از کدوم اجزای اون میخوایم استفاده کنیم فایل زیر رو هرکجا که دوست دارید بسازید. (اینجا فایل رو در root می‌سازیم و همه اجزا رو استفاده می‌کنیم)tailwindcssBase.scss@tailwind base; @tailwind components; // Add your extraction (@apply) components here @tailwind utilities; برای اینکه postcss رو با تموم تنظیماتی که الان براش انجام دادیم ران کنیم، برمیگردیم به فایل package.json در قسمت "scripts" که زیرش به‌طور پیش‌فرض یک اسکریپت "test" نوشته شده. ما کاری با test نداریم پس پاکش کنید و بجاش اسکریپت زیر رو بنویسید:"build": "postcss tailwindBase.scss -o dist/css/tailwind.css"باید به کد بالا دقت کنیم، فایل tailwindBase.css رو به عنوان ورودی میدیم و tailwind.css رو به عنوان خروجی به ما میده که فایل نهایی هست و ما باهاش کار داریم! حالا دستور build رو اجرا کنید:npm run build و به صورت زیر توی فایل html ازش استفاده میکنیم:index.htmlدر واقع الان شاید یکم مسیر طولانی‌تری رو طی کردیم اما دستمون توی شخصی‌سازی کاملا باز بوده و مسیر پیشنهادی هم همین هست. اما اگر بخوایم سریع از tailwindcss استفاده کنیم، خوشبختانه همیشه cdn ها هستن. میتونیم از cdn زیر استفاده کنیم:برای اطلاعات بیشتر به سایت tailwindcss سر بزنید، یک‌سری آموزش های ویدیویی داره که پیشنهاد میکنیم حتما ببینیدشون.ممنونم از اینکه وقت گذاشتید و مطالعه کردید، لطفا نظرتون درباره این فریم‌ورک رو با من به اشتراک بذارید.