برنامه نویسی ، طراحی سایت و نرم افزار و آموزش نکات مهم
با توجه به شرایط جاری و استفاده از وب سایت ها و سرویس دهنده های داخلی ، یکی از بهترین راه های برای نصب تیلویند استفاده از دستورات زیر میباشد.
مرحله اول
npm install @tailwindcss/cli --registry=https://mirror2.chabokan.net/npm/مرحله دوم
بعد از اینکه این دستور فایل ها و نیازمندی های لازم رو دریافت کرد، نیاز هست که شما یک فایل input.css یا هر نام دیگری که مد نظرتون هست بسازید و داخلش کد زیر رو بنویسید و ذخیره کنید.
@import 'tailwindcss';مرحله سوم
برای مرتب سازی کارتون میتونید یک فولدر بنام dist یا هر نامی که مد نظر خودتون هست بسازید و با استفاده از کد زیر فایل نهایی tailwindcss رو در پروژه تون داشته باشید و بعدا ازش استفاده کنید:
npx @tailwindcss/cli -i input.css -o ./dist/style.cssبا این دستور یک فایل style.css داخل فولدری که مشخص کردید ساخته میشه و بعد توی کد صفحه html تون میتونید مشابه کد زیر ازش استفاده کنید:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./style.css"></head><body> <h1 class="bg-red-400">Hello !</h1></body></html>اگر از vscode استفاده میکنید و همچنین از افزونه liveServer میتونید در انتهای دستور بالا
npx @tailwindcss/cli -i input.css -o ./dist/style.css --watchبزنید که بعد از اینکار نتیجه بعد از ذخیره کردن هربار فایل html تون بهتون نمایش داده بشه و نیاز نباشه هر بار صفحه تون رو رفرش کنید تا خروجی رو ببینید