لرن بلاگ

تصویر بنر مقاله Tailwind-CSS در nuxt.js

یادگیری ناکست جی اس: افزودن Tailwind CSS در nuxt.js

مقدمه

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

فریم ورک Tailwind CSS چیست؟

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

این فریم ورک از فریم ورک‌های مطرح CSS است. طرفداران زیادی دارد. تیلویند توسط آدام واتان2Adam Wathan ایجاد و خلق شده است. کلاس‌های مختلفی در آن ایجاد شده است که به شما در بخش لی اوت وب‌سایت، رنگ‌بندی سایت، تایپوگرافی و فونت وب‌سایت، ایجاد فضاهای مربوط به المان‌ها و … کمک می‌کند. در واقع با به کارگیری چنین فریم‌ ورک‌هایی شما نیاز کمتری به نوشتن کدهای CSS در سایت خود خواهید داشت. شاید هم اصلاً نیازی به انجام این کار احساس نکنید!

با اینکه این فریم ورک‌ نسبت به سایر فریم ورک‌های CSS قدمت کمتری دارد، اما جایگاه خود را به خوبی در دنیای فریم ورک‌ها مستحکم کرده است. یکی از کتاب‌های مناسبی که به خوبی جزئیات این فریم ورک را توضیح داده است، کتاب Modern CSS with Tailwind است که خواندن آن را به علاقه‌مندان توصیه می‌کنیم. در ادامه مقاله قصد داریم در مورد نحوه افزودن Tailwind CSS در nuxt.js بیشتر توضیح دهیم.

ماژول Tailwind CSS در nuxt.js

ماژول‌ها3modules در فریم ورک nuxt.js به راحتی کار شما کمک می‌کنند. در واقع آنها قابلیت‌های اضافه‌تری را به هسته ناکست جی اس اضافه می‌کنند. یکی از این ماژول‌ها که Tailwind CSS نام دارد، به شما در اضافه کردن تیلویند در ناکست جی اس کمک می‌کند. دستورهای اضافه کردن و تنظیمات مربوط در ادامه مقاله آورده می شود.

افزوردن تیلویند در ناکست جی اس

برای اضافه کردن فریم ورک تیلویند در ناکست جی اس به کمک ماژول مربوطه کافی است به محیط خط فرمان سیستم خود بروید. مثلاً اگر از ویندوز استفاده می‌کنید ابزار cmd یا command prompt را اجرا کنید. سپس به آدرس محلی که پروژه nuxt.js خود را ایجاد کرده‌اید منتقل شوید (به کمک دستور cd در این ابزار). در اینجاست که می‌توانید با اجرای دستور زیر به نصب ماژول Tailwind CSS در nuxt.js بپردازید.

npx nuxi@latest module add tailwindcss

با اجرای این دستور مراحل لازم در محیط خط فرمان اجرا شده و ماژول مربوطه نصب می‌گردد. توجه داشته باشید که در هنگام اجرای این دستور اینترنت سیستم شما وصل باشد.

تصویر نصب تیلویند در ناکست جی اس

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

افزودن ماژول Tailwind-CSS به nuxt.js

به این ترتیب فریم ورک تیلویند در ناکست جی اس اضافه شده و می‌توانید از قابلیت‌های آن استفاده کنید. البته برای افزودن این فریم ورک به ناکست جی اس، ممکن است راه‌های دیگری هم وجود داشته باشد. یک نمونه از آنها را در راهنمای اصلی فریم ورک Tailwind CSS مشاهده می‌کنید.

مثال استفاده از تیلویند در ناکست جی اس

برای اطمینان از عملکرد مناسب تیلویند در سایت خود به ذکر یک مثال استفاده از تیلویند در ناکست جی اس می‌پردازیم. برای این کار در قسمت یا پوشه components در داخل پوشه اصلی پروژه nuxt.js خود، کامپوننتی به نام ChatCompo.vue ایجاد می‌کنیم. قرار است خیلی ساده و بدون استفاده از کدهای CSS کامپوننتی برای نمایش اطلاعات یک کاربر فرضی و دکمه‌ای در داخل آن برای فرستادن پیام به وی ایجاد شود. در واقع ظاهر این کامپوننت در اینجا مورد بحث است و عملکرد آن (ارسال پیام واقعی) فعلاً مورد نظر ما نیست. کد به کار رفته در داخل این کامپوننت به شکل زیر است:

<template>
  <div class="py-8 px-8 max-w-sm mx-auto space-y-2 bg-white rounded-xl shadow-lg sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:gap-x-6">
    <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="~/assets/imgs/circle-header-img-hamid-davodi.png" alt="hamid-davodi" />
    <div class="text-center space-y-2 sm:text-left">
      <div class="space-y-0.5">
        <p class="text-lg text-black font-semibold">
          Hamid davodi
        </p>
        <p class="text-slate-500 font-medium">
          WordPress Expert
        </p>
      </div>
      <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
    </div>
  </div>
</template>

همان‌طور که در کامپوننت فوق مشخص است، ما تنها از کلاس‌های تیلویند در ناکست جی اس استفاده کرده‌ایم و هیچگونه کد CSS دیگری اضافه نکرده‌ایم. این کلاس‌ها، طراحی موردنظر ما را به کامپوننت اعمال می‌کنند. مثلاً کلاس text-purple-600 که در تگ button در این کامپوننت استفاده شده، به نرم‌افزار ما می‌فهماند که رنگ بنفش را برای متن دکمه (Message) به کار ببرد. در صورتی که با کلاس‌ها و قابلیت‌های این فریم ورک آشنایی ندارید، پیشنهاد می‌کنیم راهنمای اصلی فریم ورک تیلویند را مطالعه بفرمایید.

اعمال کامپوننت و خروجی کار

برای تکمیل مثال خود و مشاهده خروجی آن در صفحه مرورگر، کافی است کامپوننت ChatCompo ایجادشده را در یکی از صفحات وب سایت خود به کار ببریم. اگر با چگونگی نمایش صفحات وب سایت در nuxt.js آشنایی ندارید، پیشنهاد می‌کنیم مقاله «آموزش ناکست: چگونگی نمایش صفحات وب سایت» را بررسی کنید.

به عنوان مثال ما صفحه‌ای به اسم contact در وب‌سایت خود ایجاد کرده و کامپوننت ChatCompo را به شکل زیر در آن استفاده کرده‌ایم:

<template>
  <div>
    <!-- This is contact page -->
    <h1>Contact page</h1>
    <chat-compo></chat-compo>
  </div>
</template>

با این عمل و مراجعه به صفحه contact در مرورگر، خروجی کار به شکل زیر خواهد بود.

تصویر خروجی کار ناکست جی اس

مشاهده می‌کنید که کلاس‌های فریم ورک تیلویند در ناکست جی اس اعمال شده‌اند. ظاهر و شمایل وب‌سایت ما به کمک این فریم ورک بازسازی شده و مطابق طراحی‌های آن صورت گرفته است.

جمع‌بندی

در این مقاله به نحوه افزودن Tailwind CSS در nuxt.js پرداختیم. ابتدا توضیح مختصری در مورد خود فریم ورک Tailwind CSS ارائه کردیم. سپس به معرفی ماژول مربوط به استفاده از تیلویند در ناکست جی اس پرداختیم. در نهایت نیز با ذکر یک مثال و استفاده از یک کامپوننت، از صحت کار خود و ملحق شدن فریم ورک تیلویند به پروژه، مطمئن شدیم.

پاورقی:

  • 1
    class
  • 2
    Adam Wathan
  • 3
    modules
در صورتی که از خواندن مقاله فوق لذت برده‌اید، احتمالا مطالب کتاب های زیر نیز می تواند برای شما مفید باشد. توصیه لرن بلاگ آن است که چنین کتاب هایی را تهیه کرده یا در صورت وجود نسخه آنلاین، به مطالعه آنلاین آنها بپردازید: