آموزش کامل نصب Tailwind,همراه با نکات کامل,حتی برای تازه‌کارها

آموزش کامل نصب Tailwind,همراه با نکات کامل,حتی برای تازه‌کارها

داستان جذابی ! راجع به Tailwind CSS:

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

جیمز با هیجان و شگفتی به جادوگر نگاه کرد و بدون تردید، تصمیم گرفت که این کتابخانه جادویی را امتحان کند. با استفاده از کلاس‌های جادویی Tailwind CSS، جیمز به سرعت و با دقت بالا استایل‌های خنده‌داری را به المان‌های وب اعمال کرد. او المانی را با کلاس bg-purple-500 جادو کرد و پس زمینه آن را به رنگ بنفش تغییر داد. سپس با اضافه کردن کلاس text-yellow-700 به المان، متن را به رنگ زرد درخشان تبدیل کرد. جیمز با خنده و شوق به خودش نگاه کرد و از توانایی‌های جادویی Tailwind CSS لذت برد. 😄✨

با استفاده از Tailwind CSS، جیمز متوجه شد که نیازی به نوشتن کدهای CSS سفارشی تکراری ندارد. او با اضافه کردن کلاس‌های جادویی به المان‌های وب، به سرعت و با دقت بالا استایل‌های دلخواه خود را اعمال کرد. همچنین، با استفاده از امکانات شگفت‌انگیزی مانند شبکه‌بندی ریسپانسیو و ترکیب رنگ، می‌توانست ظاهر وبسایت خود را به سرعت بهینه کند و تجربه‌ای دلچسب و خنده‌دار برای کاربران فراهم کند. 🚀🌈

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

تجربه

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

تازه‌کارها ممکن است با انواع خطاها و مشکلات مواجه شوند که مانع از پیشرفت روان نصب می‌شود. این مسئله باعث می‌شود که فرایند یادگیری و استفاده از Tailwind برای آن‌ها دشوار و زمان‌بر باشد.

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

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

مراحل نصب تیلویند

Tailwind CSS با اسکن کردن تمام فایل‌های HTML، اجزای جاوا اسکریپت و قالب به هر زبان دیگری که دارید، کار می‌کند تا نام کلاس‌ها را پیدا کند. سپس ;کلاس‌های مربوطه را ایجاد کرده و آن‌ها را در یک فایل CSS خروجی می‌نویسد. این روش سریع، انعطاف‌پذیر و قابل اعتماد است — بدون نیاز به زمان اجرا (runtime).

  1. نصب Tailwind CSS

    ابتدا باید Tailwind CSS را نصب کنید. برای این کار، از دستور npm استفاده می کنیم. با اجرای دستور زیر در ترمینال، Tailwind CSS را نصب کنید: 

    npm install -D tailwindcss

  2. ایجاد فایل تنظیمات

    بعد از نصب، باید فایل تنظیمات Tailwind را ایجاد کنید. برای این کار، از دستور زیر استفاده کنید: 

    npx tailwind init

    با اجرای این دستور، یک فایل به نام tailwind.config.js ایجاد خواهد شد که تنظیمات مربوط به Tailwind را در آن قرار می دهیم.

  3. تنظیم مسیرهای قالب

    1. این مرحله به Tailwind CSS اطلاع می‌دهد که در کدام فایل‌ها (HTML و JavaScript) از کلاس‌های Tailwind CSS استفاده می‌شود.تا آن‌ کلاس ها را در فایل css خروجی بسازد. اگر این مرحله را انجام ندهید، Tailwind CSS نمی‌داند که کدام فایل‌ها باید تحت نظر بگیرد و بنابراین کلاس‌های مورد نیاز به درستی ساخته نخواهند شد.
    2. در فایل tailwind.config.js، مسیرهای قالب خود را به صورت آرایه به content اضافه کنید.
    3. این مسیرها باید به فایلهای HTML یا JavaScript قالب شما اشاره کنند.
    4. برای مثال، اگر تمام فایلهای قالب شما در پوشه src قرار دارند، کد زیر را در tailwind.config.js قرار دهید: 
      module.exports = {
        content: ["./src/**/*.html", "./src/**/*.js"],
        theme: {
            extend: {},
        },
        plugins: [],
}

  4. اضافه کردن Tailwind به CSS

    1. حالا باید دستورالعمل های Tailwind را به فایل CSS خود اضافه کنید.
    2. این دستورالعمل ها به شما امکان استفاده از کلاسهای Tailwind را می دهند.
    3. فایل css پروژه شما میتواند در هر کجا پروژه شما قرار داشته باشد.ولی برای ایجاد هماهنگی بین شما و آموزش فعلا در فایل اصلی پروژه تان یک فایل به اسم src بسازید و داخل آن فایل input.css را ایجاد کنید.
    4. برای این کار، در فایل CSS اصلی خود کدهای زیر را قرار دهید: 
      @import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

  5. خروجی CSS با استفاده از خط فرمان Tailwind

    1. حالا می توانید از ابزار CLI Tailwind برای ساخت CSS خود استفاده کنید.
    2. این دستورالعمل ها به شما امکان استفاده از کلاسهای Tailwind را می دهند.
    3. با اجرای دستور زیر در ترمینال، این ابزار فایلهای قالب شما را اسکن کرده و CSS نهایی را بسازید
    4. برای این کار، در فایل CSS اصلی خود کدهای زیر را قرار دهید: 
      npx tailwind build ./path/to/your/input.css -o ./path/to/your/output.css

  6. استفاده از خروجی Tailwind در صفحات HTML

    1. برای استفاده از Tailwind در صفحات HTML خود، باید فایل CSS کامپایل شده را به بخش اضافه کنید.
    2. همچنین، می توانید از کلاسهای Tailwind برای استایل دهی به محتوای خود استفاده کنید.
    3. برای مثال، می توانید کد زیر را در صفحه HTML خود قرار دهید: 
      <!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="path/to/your/compiled.css" rel="stylesheet">
    </head>
    <body>
        <!-- محتوای HTML شما -->
        <h1 class="text-3xl font-bold underline">
           سلام دنیا!
        </h1>
    </body>
</html>
    4. در این کد، path/to/your/compiled.css را با مسیر فایل CSS کامپایل شده خود جایگزین کنید.

خطایابی نصب تایلویند

ترمینال

برای افرادی که هیچی درباره ترمینال نمی‌دانند،کار کردن با ترمینال برایشان سخت و عذاب آور باشد ولی باید برای کار با تیلویند کمی ترمینال را بشناسید. ابتدا باید مفاهیم اولیه را توضیح می‌دهیم و سپس چند مثال ساده و کاربردی را بررسی می‌کنیم.

ترمینال چیست؟ ترمینال یک رابط کاربری متنی است که به شما امکان می‌دهد با سیستم‌عامل تعامل داشته باشید. به جای استفاده از ماوس و رابط گرافیکی، در ترمینال از دستورات متنی برای انجام کارها استفاده می‌کنید.

چگونه ترمینال را باز کنیم؟ در سیستم‌عامل ویندوز، ترمینال را می‌توانید با جستجوی "Command Prompt" یا "PowerShell" پیدا کنید. در سیستم‌عامل‌های مبتنی بر لینوکس و macOS، معمولا از ترمینال به عنوان "Terminal" یا "Konsole" استفاده می‌شود.

مثال‌های ساده و کاربردی ترمینال:

  • فهرست کردن محتویات یک پوشه: در ترمینال می‌توانید با تایپ دستور 
    ls
    فهرست محتویات پوشه فعلی را مشاهده کنید.
  • تغییر پوشه: برای رفتن به پوشه دیگر، از دستور 
    cd
    (change directory) استفاده کنید. مثلا 
    cd Documents
    شما را به پوشه "Documents" هدایت می‌کند.
  • ایجاد یک پوشه جدید: با تایپ دستور 
    mkdir
    نام_پوشه می‌توانید پوشه جدیدی ایجاد کنید.
  • ایجاد یک فایل جدید: با استفاده از دستور 
    touch نام_فایل.txt
    می‌توانید یک فایل متنی جدید ایجاد کنید.
  • مشاهده محتویات یک فایل: برای مشاهده محتویات یک فایل متنی، از دستور 
    cat نام_فایل.txt
    استفاده کنید.
  • نصب یک برنامه: در سیستم‌عامل‌های مبتنی بر لینوکس، با استفاده از دستورات 
    apt-get install نام_برنامه
    یا 
    yum install نام_برنامه
    می‌توانید برنامه‌های جدید را نصب کنید.
  • اجرای یک برنامه: پس از نصب یک برنامه، می‌توانید آن را با تایپ نام برنامه در ترمینال اجرا کنید. مثلا 
    python script.py
    یا 
    node app.js

چیزی هست که در ترمینال کمک مان کند؟برای اینکه توضیحات و دستورات را در هر کجا از ترمینال ببینیم تا کمک و راهنمایی بشویم لازم تقریبا در جلو هر دستور ترمینال یکی از کلمه های زیر رو 

<دستور>  help | -help | --help | h | -h | --h
را اضافه کنید.

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

دستور npm

دستور npm (Node Package Manager) یک ابزار بسیار مهم و کاربردی در توسعه وب است که به شما کمک می‌کند تا به راحتی و سریع پکیج‌های مورد نیاز خود را مدیریت کنید.

اصلی‌ترین کاربرد npm:

نصب پکیج‌ها: با استفاده از دستور 

npm install <package-name>
می‌توانید پکیج‌های مورد نیاز خود را به پروژه اضافه کنید.

حالا وقتی شما دستور بالا را اجرا می‌کنید، چند اتفاق مهم رخ می‌دهد:

  1. دانلود پکیج از مخزن مرکزی npm:
    • npm یک مخزن مرکزی است که شامل هزاران پکیج مختلف است.
    • وقتی شما نام یک پکیج را وارد می‌کنید، npm به صورت خودکار و پشت صحنه، آن پکیج را از مخزن مرکزی خود دانلود می‌کند.
    • با توجه به مشکلات فراوان اینترنت ، حتما اتصال اینترنت خود را چک کنید.
    • خطا زیر مرتبط میشه به اتصال اینترنت 
      npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'
  2. نصب پکیج در پروژه:
    • پس از دانلود پکیج، npm آن را در پوشه node_modules در پروژه شما نصب می‌کند.
    • node_modules پوشه‌ای است که تمام پکیج‌های نصب شده در پروژه شما در آن قرار می‌گیرند.
  3. افزودن پکیج به فایل package.json:
    • علاوه بر نصب پکیج در پوشه node_modules ، npm همچنین اطلاعات مربوط به آن پکیج را در فایل package.json پروژه شما ذخیره می‌کند.
    • فایل package.json یک فایل مهم در پروژه است که اطلاعات مربوط به پروژه و پکیج‌های نصب شده در آن را نگه می‌دارد.
    • بنابراین پس از نصب tailwind با دستور 
      npm install -D tailwindcss
      یا 
      npm install --save-dev tailwindcss
      ،باید داخل این فایل محتوا زیر باشد. 
      {
  "devDependencies": {
    "tailwindcss": "^3.4.3"
  }
}
      در صورتی که از دستور 
      npm install tailwindcss
      یا 
      npm install --save tailwindcss
      استفاده کنید،باید داخل این فایل محتوا زیر باشد. 
      {
  "dependencies": {
    "tailwindcss": "^3.4.3"
  }
}
      که در هر ۴ حالت محتوا فایل درست است.

روش های مسیر دهی به قالب‌های tailwind

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

برای آدرس دادن(مسیردهی) ما میتوانیم از الگو هم استفاده کنیم مثلا ستاره 

*.html
یعنی همه فایل های با پسوند html و دو ستاره 
**
یعنی همه‌ی فایل داخل پوشه و زیر پوشه های آن پوشه.

به عنوان مثال، اگر ساختار پوشه‌های پروژه شما به صورت زیر باشد:


   project/
    ├── index.html
    ├── scripts/
    │    ├── app.js
    │    └── pages/
    │         └── home.js
    └── styles/
         └── main.css
علامت‌ها در مسیردهی
  • نقطه و اسلش: 
    • ./
    • نشان‌دهنده مسیر جاری (همان دایرکتوری که فایل فعلی در آن قرار دارد) است.
    • مثلا میخواهیم از فایل app.js به فایل project/scripts/pages/home.js را آدرس بدهیم. 
      './pages/home.js'
  • دو نقطه و اسلش: 
    • ../
    • نشان‌دهنده مسیر والد (یک دایرکتوری بالاتر) است.
    • مثلا میخواهیم از فایل app.js فایل project/styles/main.css را آدرس بدهیم. 
      '../styles/main.css'
  • ستاره: 
    • *
    • نشان‌دهنده هر کاراکتری است.
    • مثلا میخواهیم از فایل app.js هر فایل جاوا اسکریپتی رو از فایل project/scripts/pages را آدرس بدهیم. 
      './pages/*.js'
  • دو ستاره: 
    • **
    • نشان‌دهنده همه زیر پوشه ها است.
    • مثلا میخواهیم از فایل index.html همه فایل ها جاوااسکریپت پوشه project/scripts و همچنین زیر پوشه‌های آن را آدرس بدهیم. 
      './scripts/**/*.js'
انواع روش مسیردهی
  • استفاده از مسیر نسبی:
    • این روش برای فایل‌هایی که در پوشه‌های نزدیک به فایل 
      tailwind.config.js
      قرار دارند مناسب است.
    • مثال: 
      "./src/**/*.html"
  • استفاده از مسیر مطلق:
    • این روش برای فایل‌هایی که در مسیرهای دورتر قرار دارند مناسب است.
    • مثال: 
      "/var/www/myproject/src/**/*.html"
      • ویندوز :
        • در ویندوز، مسیر مطلق شامل درایو و پوشه‌های مربوطه است.
        • برای مثال، مسیر مطلق به یک فایل در ویندوز می‌تواند به این شکل باشد: C:\Users\YourUsername\Documents\myfile.txt
        • .نکته مهم در ویندوز، به جای \(بک اسلش) باید از \\ (دو تا بک سلش) استفاده کنید، زیرا سلش تک در جاوااسکریپت به عنوان کاراکتر فرار شناخته می‌شود.این بدان معنی است که اگر در رشته‌ای از \ استفاده کنید، جاوااسکریپت آن را به عنوان کاراکتر خاص در نظر می‌گیرد و به جای آن کاراکتر دیگری را نمایش می‌دهد.
        • پس باید این را در جاوا اسکریپت استفاده کنیم. 
          C:\\Users\\YourUsername\\Documents\\myfile.txt
      • لینوکس :
        • در لینوکس، مسیر مطلق شامل ریشه فایل سیستم (root) و پوشه‌های مربوطه است.
        • برای مثال، مسیر مطلق به یک فایل در لینوکس می‌تواند به این شکل باشد: /home/username/documents/myfile.txt.
  • استفاده از الگوی گلوب:
    • این روش برای پردازش همه فایل‌های مورد نظر در پروژه استفاده می‌شود.
    • مثال: 
      "**/*.{html,js}"
    • این الگو همه فایل‌های HTML و JavaScript در تمام زیرپوشه‌ها را پردازش می‌کند.
  • استفاده از آرایه مسیرها:
    • این روش به شما امکان می‌دهد تا مجموعه‌ای از مسیرهای مختلف را مشخص کنید.
    • مثال: 
      ["./src/.html", "./src/**/.js"]
    • در این مثال، همه فایل‌های HTML در پوشه src و همه فایل‌های JavaScript در زیرپوشه‌های src پردازش می‌شوند.
  • استفاده از توابع:
    • این روش به شما امکان می‌دهد تا مسیرها را به صورت پویا تعیین کنید.
    • مثال: 
      function() {
    return "/var/www/myproject/src/*.html"
}
    • در این مثال، تابع یک آرایه از مسیرها را بازگشت می‌دهد که به عنوان ورودی پردازش می‌شوند.

دستورtailwind

برای شروع فرآیند پیدا کردن و ساختن کلاس ها، باید ابزار فرمان خط (CLI) Tailwind را اجرا کنید. این ابزار به بررسی فایل‌های قالب HTML شما می‌پردازد و کلاس‌های Tailwind که در آنها استفاده شده‌اند را مشخص می‌کند. سپس، فایل CSS نهایی و خروجی را ایجاد می‌کند.

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

npx tailwind -i ./src/input.css -o ./src/output.css --watch

خروجی به شکل زیر است 

> npx tailwind -i ./src/input.css -o ./src/output.css --watch

Rebuilding...

Done in 547ms.

Rebuilding...

Done in 533ms.

Rebuilding...

Done in 453ms.

شرح دستور tailwind

  1. npx tailwind
    • این بخش ابزار CLI Tailwind را فراخوانی می‌کند.
    • npx یک ابزار است که به شما امکان می‌دهد بدون نیاز به نصب جهانی Tailwind، دستور tailwindcss را اجرا کنید. 
  2. -i ./src/input.css
    • این بخش به ابزار CLI می‌گوید که فایل ورودی CSS شما در مسیر ./src/input.css قرار دارد.
    • این همان فایلی است که شما در آن کلاس‌های Tailwind را می‌نویسید.
  3. -o ./src/output.css
    • این بخش به ابزار CLI می‌گوید که فایل خروجی CSS (فایل نهایی) در مسیر ./src/output.css قرار داد.
    • این فایل شامل فقط استایل‌های مورد نیاز پروژه‌ی شما خواهد بود.
  4. --watch
    • این پرچم به ابزار CLI می‌گوید که به‌طور مداوم فایل ورودی را زیر نظر بگیرد و هرگاه تغییراتی در آن ایجاد شود، فایل خروجی را به‌روز کند.
    • این امکان را به شما می‌دهد که بدون نیاز به اجرای دستی فرآیند ساخت، تغییرات خود را در مرورگر مشاهده کنید.

پس از اجرای این دستور در ترمینال، ابزار CLI Tailwind به بررسی فایل‌های قالب HTML شما خواهد پرداخت. سپس، کلاس‌های Tailwind استفاده شده در این فایل‌ها را شناسایی کرده و آنها را در فایل CSS نهایی (./src/output.css) قرار خواهد داد. این فایل فقط حاوی استایل‌های مورد نیاز پروژه‌ی شما خواهد بود، که موجب ایجاد یک بسته CSS کوچک‌تر و کارآمدتر می‌شود.

اگر در ترمینال ، فرآیند npx tailwind -i ./src/input.css -o ./src/output.css --watch که در حال نظارت بر فایل ورودی و تولید فایل خروجی است، متوقف شده باشد. و در صورتی از که کلاس تیلویندی استفاده کنید که قبلا به کار گرفته نشده باشد ، در مرورگر شما آن تغییر(کلاس) مشاهده نخواهد.چون آن کلاس به فایل css خروجی شما اضافه نشده است.

یکی از پر تکرارترین خطاها همین بیلد نشدن کلاس های داخل قالب های html است ; که باید چک کنید ببینید با تغییر فایل html در ترمینال کار بیلد انجام می‌شود یا خیر.

در صورت نیاز به متوقف کردن این فرآیند در ترمینال، می‌توانید با فشردن Ctrl + C در ترمینال، آن را متوقف کنید.

نحوه استفاده تیلویند در فایل html

  1. HTML فایل را باز کنید:

    • فایل HTML، فایلی است که محتوای صفحه وب را در آن نگه می‌داریم. این فایل شامل تگ‌های مختلفی است که ساختار صفحه را مشخص می‌کنند.
    • نام فایل html به شکل نام فایل.html هست .

  2. DOCTYPE را اضافه کنید:

    • در ابتدای فایل HTML، باید یک خط به نام <!doctype html> قرار دهید. این به مرورگر می‌گوید که این یک فایل HTML5 است.

  3. تگ <head> را اضافه کنید:

    • در داخل فایل HTML، یک تگ به نام <head> وجود دارد. این تگ، اطلاعاتی را در مورد صفحه وب در خود نگه می‌دارد که مرورگر از آن استفاده می‌کند.
      • <meta charset="UTF-8">: این تگ مشخص می‌کند که کدگذاری متن صفحه به صورت UTF-8 است. این کدگذاری، امکان نمایش متون به زبان‌های مختلف را فراهم می‌کند.
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">: این تگ به مرورگر می‌گوید که صفحه را برای نمایش در دستگاه‌های مختلف با اندازه‌های متفاوت آماده کند. width=device-width باعث می‌شود که عرض صفحه برابر با عرض دستگاه باشد و initial-scale=1.0 باعث می‌شود که ابتدا صفحه با مقیاس ۱ (یک) نمایش داده شود.این تگ برای ریسپانسیو کردن صفحه ضروری است.
      • <link href="./output.css" rel="stylesheet">: این تگ به مرورگر می‌گوید که فایل CSS با آدرس ./output.css را به عنوان استایل‌شیت صفحه در نظر بگیرد. این فایل CSS، همان فایلی است که تایلویند را کامپایل و ایجاد کرده است.

  4. استفاده از کلاس‌های تایلویند:

    • در داخل بدنه (<body>) صفحه، می‌توانید از کلاس‌های تایلویند برای استایل‌دهی به عناصر HTML استفاده کنید. در مثال داده شده، به تگ <h1> کلاس‌های text-3xl، font-bold و underline اضافه شده‌اند که باعث می‌شود این عنوان بزرگ، ضخیم و زیرخط‌دار نمایش داده شود.