مهدی کوهنورد

3 هفته پیش توسط مهدی کوهنورد مطرح شد

درخواست فولدر Tailwind یا ارارئه راه حل

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

ثبت پرسش جدید

Karen

تخصص : Front-End developer

@Hello.world 3 هفته پیش آپدیت شد

درود
نیازی به گرفتن فولدر ندارید فقط کافیه node و npm رو داشته باشد اگه ندارید میتونید از این لینک دانلود کنید : https://mirror-nodejs.runflare.com/dist/
با cmd وارد پوشه پروژتون بشد و دستور زیر رو بزنید تا فایل package.json براتون نصب بشه

npm init -y

با دستور زیر تلویند سی اس اس و تلویند cli رو نصب کنید به خاطر دسترسی نداشتن به npm از ریجستری runflare.com استفاده میکنیم

npm i --save-dev tailwindcss @tailwindcss/cli --registry="https://mirror-npm.runflare.com

بعد از اینکه تلویند نصب شد باید فایل package-lock.json و پوشه nodemodules براتون نصب شده باشه
بعد این کار ها فایل html رو بسازین مثل index.html این :


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h3>hello_world!</h3>
    </body>
</html>

بعد از این که فایل html خودتونو ساختین فایل ورودیه css رو بسازین مثلا یک فایل به این نام style.css
حالا وقتشه که کار اجرا رو انجام بدیم ی فایل به نام tailwind.config.js بساز توش اینو بزار :

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html", // یا نام فایل HTML اصلی شما
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

تو فایل سی اس اسی که ساختیم تلویندو ایمپورت کن :

@import "tailwindcss";

بعد تلویندو اجرا کن فقط دقت کن من پروژه تورو نمیبینم باید فایل ورودی رو درست بدی تو جواب من اجرای تلویند میشه این :

"tailwindcss -i style.css -o ./dist/output.css --watch

خوب کار تموم شد تلویند ران میشه و میتونی ازش استفاده کنی یک فولدر به نام dist ایجاد میشه و فایل اوت پوت سی اس اس داخلشه اونو لینک کن به اچ تی ام ال و ببین همه چی خوب کار میکنه یا نه :


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./dist/output.css">
    </head>
    <body>
        <h3 class="text-blue-600">hello_world!</h3>
    </body>
</html>

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

</body></html>

ارسال پاسخ

حسین

تخصص : Full Stack Developer

@hosseinyn91 3 هفته پیش مطرح شد

درود. mirror زیر استفاده کنید برای npm :
https://iran.chabokan.net/
یکم که در سایت بیاید پایین تر برای js و python و اینا mirror دارن. اگر cdn احتیاج دارید lib.arvancloud.ir

ارسال پاسخ

Karen

تخصص : Front-End developer

@Hello.world 3 هفته پیش آپدیت شد

npm init -y

npm i --save-dev tailwindcss @tailwindcss/cli --registry="https://mirror-npm.runflare.com


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h3>hello_world!</h3>
    </body>
</html>

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html", // یا نام فایل HTML اصلی شما
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

تو فایل سی اس اسی که ساختیم تلویندو ایمپورت کن :

@import "tailwindcss";

"tailwindcss -i style.css -o ./dist/output.css --watch


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./dist/output.css">
    </head>
    <body>
        <h3 class="text-blue-600">hello_world!</h3>
    </body>
</html>

</body></html>

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

درخواست فولدر Tailwind یا ارارئه راه حل

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید