لذت طراحی با تیلویند

بی شک دو مورد از غیر قابل انکار ترین تمایلات انسان مدرن، تمایل به سادگی و سرعت می باشد؛ می توان انعکاس این موارد را در اختراعات یکی دو قرن اخیر مثل هواپیما، تلفن، اینترنت و … نیز جست و جو کرد. تیلویند Tailwind CSS  نیز حاصل و زاده همین تمایل ذاتی انسان به سادگی و سرعت است! ابزاری بی نظیر برای توسعه هرچه سریع تر و ساده تر رابط کاربری وبسایت ها، در بهینه ترین حالت ممکن.

تیلویند دقیقا چیست؟

تیلویند یک فریم ورک سی اس اس برای نوشتن سریع و بهینه استایل های مورد نیاز وبسایت است. با استفاده از تیلویند، می توانید در سریع ترین زمان ممکن وبسایت هایی مدرن و بهینه با کمترین حجم کد های CSS را ساخته و رابط کاربری آن را توسعه دهید. بیایید برای درک بهتر این موضوع، یک مثال ساده را باهم بررسی کنیم:

در حالت عادی زمانی که بخواهیم در وبسایت خود یک متن با سایز فونت rem۱ و وزن bold داشته باشیم، نیاز است به تگ حاوی متن خود در HTML یک class اختصاص دهیم و در ادامه، در CSS آن را تارگت کرده و استایل های مذکور را اعمال کنیم:

<p class="hello-text">سلام، اینجا کدنایته!</p>

<style>
    .hello-text {
        font-size: 1rem;
        font-weight: bold;
    }
</style>

اما اگر همین فرایند را با استفاده از تیلویند انجام دهیم، کد مورد نیاز به شکل خواهد بود:

<p class="text-base font-bold">سلام، اینجا کدنایته!</p>

همین و بس!

قطعا با همین مثال ساده، میتوانید حدس بزنید فرایند توسعه با استفاده از تیلویند چقدر ساده تر و سریع تر خواهد بود.

دیگر خبری از دردسر انتخاب اسم برای کلاس ها در HTML نیست!

همانطور که در مثال بال مشاهده کردید، هنگام کار با تیلویند نیازی به نام گذاری کلس ها وجود ندارد، بلکه خود تیلویند شامل کلس هایی از پیش تعیین شده مثل fex" ,"font-bold"" ","text-base و … است که استفاده از آنها، استایل های مورد نیاز را به عنصر مد نظر شما اعمال خواهد کرد. این موضوع باعث می شود دغدغه انتخاب نام برای کلس ها از بین رفته و در نتیجه فرایند توسعه ساده تر گردد و همچنین نگرانی تداخل نام کلس ها نیز دیگر معنایی نخواهد داشت.
نیازی نیست از فایل HTML خود خارج شوید!

همانطور که دیدید، تیلویند مبتنی بر Utility هاست. یعنی مجموعه ای از کلس ها در آن تعریف شده و با اعمال هر یک از این کلس ها به عناصر HTML، استایل مد نظر به آن عنصر اعمال میگردد؛ در نتیجه نیازی به خارج شدن از فایل HTML و نوشتن جداگانه فایل های CSS وجود نخواهد داشت! این مورد باعث کاهش تعداد فایل ها و همچنین بهبود مشهود سرعت توسعه خواهد شد. زیرا دیگر خبری از فایل های CSS نیست!

شخصی سازی بی حد و مرز

تقریبا هر property در CSS که فکرش را بکنید از قبل در تیلویند تعریف شده و class خاص خود را دارد، اما به هر حال شما میتوانید property های مد نظر خود را نیز به تیلویند اضافه کنید و حتی کلس های ترکیبی از سایر کلس های تیلویند تولید کنید؛ حتی قابلیت ویرایش کلس های دیفالت پایه ای تیلویند نیز وجود دارد. بی شک هیچ محدودیتی هنگام استفاده از این فریم ورک وجود نخواهد داشت!

کامل ریسپانسیو، فراتر از آنچه تصور کنید

هر آنچیزی که برای طراحی های ریسپانسیو نیاز دارید، با ساده ترین روش پیاده سازی ممکن در فریم ورک تیلویند گنجانده شده است. تیلویند فریم ورکی mobile-frst است و فرایند ریسپانسیو سازی در آن، با استفاده از مدیا کوئری های خود تیلویند از موبایل آغاز شده و تا دسکتاپ و بالتر ادامه می یابد.

خروجی سبک و بهینه

پس از اتمام فرایند توسعه، خود تیلویند به صورت خودکار تمامی استایل ها و class های استفاده شده توسط شما را شناسایی می کند و همان ها را در یک style sheet ساده CSS قرار داده و به این شکل خروجی خود را تولید می نماید. در واقع خروجی نهایی تیلویند، یک فایل CSS معمولی و بهینه است که در آن خبری از استایل ها و کد های اضافی نیست! همین امر موجب میگردد حجم کد های CSS بسیار اندک باشد و در نتیجه بازدهی وبسایت به شکل چشم گیری افزایش یابد.

پروژه ای بی نظیر، با طراحی اختصاصی!

در دوره آموزشی تیلویند کدنایت، یک پروژه فروشگاهی حرفه ای با دیزاین اختصاصی تعریف شده است که تمامی آموخته های شما را به چالش خواهد کشید. در این پروژه، فرانت اند یک وبسایت فروشگاهی را به طور کامل با استفاده از تیلویند پیاده سازی خواهیم کرد. نکته مهم در این پروژه آن است که طراحی این وبسایت فروشگاهی، منحصرا توسط دیزاینر برای دوره تیلونید کدنایت طراحی گردیده و ما در کنار یکدیگر، قدم به قدم اقدام به پیاده سازی آن از روی دیزاین ارائه شده توسط دیزاینر خواهیم نمود. همچنین فایل فیگما \Figma\ دیزاین پروژه نیز در دسترس دانشجویان قرار خواهد گرفت. این پروژه فروشگاهی، شامل صفحه اصلی، لیست محصولت، صفحه جزئیات محصول، سبد خرید و فاکتور خرید می باشد و هر چالشی که هنگام کار با تیلویند در یک پروژه واقعی وجود داشته باشد، در طول آن بررسی میگردد.

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