دسته بندی:آموزش برنامه نویسی

تاریخ انتشار:سه شنبه 18 بهمن 1401

نویسنده:مرتضی رستمیان

آموزش نصب تیلویند بدون npm !

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

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

پس الان بریم که با روش cdn در فریمورک تیلویند آشنا بشیم .

نصب تیلویند با cdn

استفاده از cdn به صورت آنلاین :
برای استفاده از این روش فقط کافیست که کد زیر را در ادیتور خود پیست کنید .

این کد مهم نکته اش این است که در تگ head باید یک script نیز استفاده کرد با src پیش فرضی که تیلویند در اختیار ما داده است .
با انجام این کار خیلی راحت می توانیم از تیلویند استفاده کنیم و از لذت ببریم .

 <!doctype html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="text-3xl font-bold underline">
    Hello world!
    </h1>
</body>
</html>

استفاده از cdn به صورت آفلاین :
برای استفاده از روش فقط کافیه که تمام مراحل بالا را انجام دهیم اما فقط کافیست لینک زیر را باز کنید و آن را با پسوند js سیو کنید و در قسمت script src="" آدرس فایل js را بدهید و از تیلویند در سیستم خود استفاده کنید .
نکته : اگر لینک زیر را باز کردید و شمارا به یک سری کد رو به رو کرد ، فقط کافیه تمام کد هارو کپی کنید و خودتون با اسم دلخواه و پسوند js استفاده کنید .

سفارشی کردن کد ها پیش فرض تیلویند

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

<!doctype html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    clifford: '#da373d',
                }
            }
        }
    }
</script>
</head>
<body>
  <h1 class="text-3xl font-bold underline **text-clifford**">
    Hello world!
  </h1>
</body>
</html>

بخوانید درباره : آموزش سفارشی کردن کد ها پیش فرض تیلویند

اضافه کردن کدهای دلخواه css در تیلویند

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

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
    }
  </style>
</head>
<body>
  <div class="lg:content-auto">
    <!-- ... -->
  </div>
</body>
</html>

نتیجه گیری

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

بخوانید درباره : دوره های برنامه نویسی تیم وارنا

#تیلویند, #فریم-ورک, #لایبرری, #position, #2023