اموزش نصب Tailwind css با npm

همانطور که می دانید Tailwind css یک کتابخانه CSS است که با استفاده از کلاس های پیش فرض باعث سرعت بخشیدن به تولید و اجرای پروژه شما می شود. در این اموزش از شرکت برنامه نویسی وارنا نحوه نصب tailwind با استفاده از npm در 7 گام در اختیار شما قرار خواهد گرفت.

گام های نصب tailwind با npm:

1. نصب npm و ساخت پروژه اولیه

2. نصب tailwind در پروژه از npm

3. ساخت فایل تنظیمات tailwind

4. ویرایش نشانی فایل مادر در تنظیمات tailwind

5. ساخت یک فایل css اولیه برای خوانش کلاس ها و افزودن دستورات tailwind@

6. ذخیره دائمی دستور خوانش کلاس ها از فایل css در اسکریپت پروژه

7. ساخت یک فایل html و لینک به فایل css

1. نصب npm و ساخت پروژه اولیه

در ابتدا از معرفی npm اغاز می کنیم که همان node package manager به معنی نرم‌افزار مدیریت بسته node.js است. پس لازم است برای نصب ان به سایت اصلی node.js به نشانی https://nodejs.org/en/download مراجعه نموده و نسخه LTS متناسب با ویندوز خود را دانلود و نصب نمایید. سپس یک پوشه خالی جهت راه اندازی پروژه خود ایجاد کنید و ان را با Vscode باز کنید. داخل ترمینال دستور npm init را اجرا کنید تا فایل package json اولیه ساخته شود.

2. نصب tailwind در پروژه از npm

در مرحله دوم دستور زیر را داخل ترمینال پروژه ای که ساخته اید اجرا کنید تا tailwind از npm نصب شود.

npm install -D tailwindcss

3. ساخت فایل تنظیمات tailwind

در مرحله سوم دستور زیر را داخل ترمینال اجرا کنید تا فایل تنظیمات tailwind با نام tailwind.config.js در پروژه شما اضافه شود.

npx tailwindcss init

4. ویرایش نشانی فایل مادر در تنظیمات tailwind

در مرحله چهارم داخل فایل config به content رفته و ادرس زیر را اضافه کنید تا فایل اصلی پروژه که در پوشه src خواهید ساخت را جهت اعمال تنظیمات ردیابی کند.

 module.exports = {
              content: ["./src/**/*.{html,js}"],
            }

5. ساخت یک فایل css اولیه برای خوانش کلاس ها و افزودن دستورات tailwind@

در مرحله پنجم یک پوشه با نام src در پروژه بسازید و یک فایل css با نام input.css داخل ان ایجاد کنید. سپس موارد زیر را برای خوانش استایل های css در تمام لایه های tailwind به این فایل اضافه کنید.

        @tailwind base;
        @tailwind components;
        @tailwind utilities;

6. ذخیره دائمی دستور خوانش کلاس ها از فایل css در اسکریپت پروژه

سپس به فایل package.json پروژه بروید و در قسمت script ادرس زیر را به جای نشانی قبلی وارد کنید. مهمترین نکته ای که باید بدانید این است که در این مرحله باید بعد از افزودن و تغییر نام کلمه test به build که البته این تغییر نام اختیاری است، داخل ترمینال پروژه یکبار دستور npm run build را باید اجرا کنید تا این ادرس ذخیره دائمی شود.

 "scripts": {
                  "build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
                },

7. ساخت یک فایل html و لینک به فایل css

در گام اخر یک فایل index.html ایجاد کنید و ادرس "link href= "/dist/output.css" rel="stylesheet را برای لینک کردن پروژه به فایل css در قسمت head اضافه کنید.

اکنون میتوانید با کلاسهایی که در سایت اصلی Tailwindذکر شده اند و همچنین اموزش های انها که در سایت شرکت برنامه نویسی وارنا نیز موجود می باشند به استایل دهی و بهینه سازی کدهای پروژه خود بپردازید.

سخن پایانی

در پایان توضیحات نحوه نصب Tailwind css با npm، امیدوارم این اموزش مورد استفاده شما قرار گرفته باشد .

شما می توانید برای دریافت اموزش تمامی نکات کاربردی Tailwind و Sass به سایت شرکت برنامه نویسی وارنا مراجعه نموده و در قسمت اموزش ها ضمن خرید دوره اموزش Tailwind و Sass از امکان پشتیبانی 24 ساعته جهت رفع اشکال و بالا بردن سطح تسلط خود استفاده نمایید. همچنین شرکت برنامه نویسی وارنا به دنبال جذب افراد مستعد و علاقه مند به برنامه نویسی است که اطلاعات کامل ان در بخش اموزش و استخدام سایت وارنا موجود می باشد.