در این قسمت، یاد می‌گیرید چطور Tailwind CSS را به پروژه اضافه و از آن استفاده کنید. ابتدا روش استفاده از CDN را بررسی می‌کنیم تا بتوانید به‌سادگی و بدون نصب هیچ ابزار خاصی، کلاس‌های Tailwind را در فایل HTML به کار ببرید. این روش برای شروع و تمرین بسیار سریع و مناسب است.

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

در پایان، با افزونه‌ی Live Server آشنا شده و یاد می‌گیرید چطور با اجرای هم‌زمان صفحه، تغییرات را به‌صورت زنده مشاهده کنید. این ابزار روند یادگیری و توسعه با Tailwind را سریع‌تر و لذت‌بخش‌تر می‌کند.

استفاده از Tailwind CSS با CDN

ابتدا وارد وب‌سایت Tailwind CSS می‌شویم و از بخش Docs وارد قسمت Installation می‌شویم. در این بخش روش‌های مختلفی برای نصب و استفاده از Tailwind CSS وجود دارد. در این قسمت با روش‌های نصب کاری نداریم و از روش CDN استفاده می‌کنیم.

در بخش مربوط به CDN، یک قطعه کد برای HTML قرار داده شده است و

قسمت Installation در CDN قطعه کد برای HTML

کافی است تگ script مربوط به Tailwind CSS را به بخش head فایل HTML اضافه کنیم.

برای شروع، یک فایل با نام index.html ایجاد می‌کنیم. کدهای اولیه این فایل را از قبل آماده کرده‌ایم تا زمانمان صرف نوشتن کدهای ابتدایی نشود. در این فایل یک title، یک تگ h1 شامل عبارت «سکان آکادمی» و یک استایل ساده برای راست‌چین کردن محتوای body قرار داده‌ایم.

حالا کد CDN را از مستندات Tailwind CSS کپی کرده و داخل تگ head فایل HTML قرار می‌دهیم. با Refresh کردن صفحه، می‌توانیم نتیجه را مشاهده کنیم.

برای اطمینان از اینکه Tailwind CSS به‌درستی به پروژه اضافه شده است، چند کلاس نیز به عناصر صفحه اضافه می‌کنیم. این کلاس‌ها را در قسمت‌های بعدی به‌طور کامل بررسی خواهیم کرد و در اینجا فقط تأثیر آن‌ها را مشاهده می‌کنیم. با تغییر اندازه و نحوه نمایش متن، می‌بینیم که Tailwind CSS با موفقیت به پروژه اضافه شده است.

CDN چیست و چگونه کار می‌کند؟

در روش معمول استفاده از CSS، می‌توانیم استایل‌ها را در یک فایل جداگانه با پسوند .css قرار دهیم و سپس با استفاده از تگ link، آدرس آن فایل را در HTML مشخص کنیم. برای JavaScript نیز می‌توانیم با استفاده از تگ script، فایل موردنظر را به پروژه اضافه کنیم.

CDN نیز روشی برای دریافت فایل‌ها از طریق اینترنت است. در این روش، فایل‌های CSS یا JavaScript روی یک سرور قرار دارند و ما با استفاده از یک لینک، آن‌ها را در پروژه خود دریافت می‌کنیم.

بنابراین، در صورتی که از CDN استفاده کنیم، سیستم باید به اینترنت متصل باشد؛ زیرا فایل موردنظر از طریق اینترنت دریافت می‌شود.

استفاده آفلاین از Tailwind CSS

اگر بخواهیم بدون اتصال به اینترنت از Tailwind CSS استفاده کنیم، می‌توانیم فایل موردنظر را دانلود کرده و به‌صورت محلی در پروژه قرار دهیم.

برای این کار، لینکی را که در تگ script مربوط به CDN قرار داده‌ایم کپی می‌کنیم. این لینک به یک فایل JavaScript اشاره می‌کند که به‌صورت Minify شده قرار گرفته است تا حجم کمتری داشته باشد. سپس این کد را کپی کرده و در کنار فایل index.html، یک فایل JavaScript با نام tailwind.js ایجاد می‌کنیم و کد کپی‌شده را داخل آن قرار می‌دهیم. در مرحله بعد، به فایل HTML برمی‌گردیم و به‌جای آدرس اینترنتی CDN، فایل tailwind.js را که به‌صورت محلی در پروژه ایجاد کرده‌ایم، آدرس‌دهی می‌کنیم.

برای اطمینان از عملکرد صحیح این روش، چند کلاس Tailwind CSS را تغییر می‌دهیم.

با مشاهده خروجی،

جرای آفلاین پروژه Tailwind CSS با کمک فایل محلی

می‌بینیم که کلاس‌ها همچنان به‌درستی اعمال می‌شوند. در این حالت، کدهای Tailwind CSS را از اینترنت دریافت نمی‌کنیم؛ بلکه فایل موردنیاز را یک‌بار دانلود کرده و به‌صورت محلی در پروژه قرار داده‌ایم. بنابراین حتی در صورت قطع بودن اینترنت نیز می‌توانیم از این فایل و امکانات آن استفاده کنیم.

جمع‌بندی

در این قسمت نحوه اضافه کردن Tailwind CSS به پروژه HTML با استفاده از CDN را بررسی کردیم و با مفهوم CDN نیز آشنا شدیم. همچنین یاد گرفتیم چگونه فایل Tailwind CSS را به‌صورت محلی در پروژه قرار دهیم تا بتوانیم بدون اتصال به اینترنت از آن استفاده کنیم.

در قسمت‌های بعدی، نحوه استفاده از کلاس‌های Tailwind CSS و امکانات مختلف آن را بیشتر بررسی خواهیم کرد.

راه اندازی تیلویند و ساخت اولین پروژه