🔸 میرسیم به ادامه مراحل راه اندازی. حالا بهتره یک فایل index.html و یک پوشه ای به اسم src ایجاد کنیم و درون آن یک پوشه مختص css درست کنیم تا فایل های مربوط به css رو درون اون قرار بدیم. اولین فایلی که باید بسازیم input.css هست و باید محتوای زیر رو درون اون قرار بدیم :
@tailwind base;
@tailwind components;
@tailwind utilities;
در واقع input.css نقطه ورود برای تیلویند است و شامل دستورات و قواعدی هست که میگن تیلویند css نهایی رو چجوری پیاده سازی کنه.
♦️ دستور اول : شامل استایل های پایه یا base تیلویند میشه مثل استایل های ابتدای عناصر html که بهمون کمک میکنه تا در همه مرورگر ها یک استایل ثابت و یکپارچه رو داشته باشیم. البته میتونیم چیز های جدیدی به این لایه اضافه کنیم مثل :
@layer base {
@font-face {
font-family: Yekan;
src: local(Yekan), url("./Yekan.woff") format("woff");
}
}♦️ دستور دوم : شامل استایل های کامپوننت هامون میشه که یکسری استایل های از پیش ساخته شدن هستن برای عناصر مختلف مثل دکمه ها و فرم ها و کارت ها و ... و برای اضافه کردن یک کامپوننت باید این کار رو بکنیم :
@layer components {
.btn {
@apply bg-green-600 text-white text-2xl p-3 rounded-lg font-medium shadow-lg shadow-gray-700 active:bg-green-700 font-yekan;
}
}♦️ دستور سوم : در این بخش ما دیگه کامپوننت نداریم بلکه دقیقا همون کلاس هایی که در کدمون استفاده میکنیم رو داریم مثل text-2xl که البته میتونیم مورد های دلخواهم هم بهش اصافه کنیم مثل :
@layer utilities {
.text-shadow {
text-shadow: 2px 2px #ff0000;
}
}🔸 حالا کافیه در کنار input.css یک فایل output.css که به عنوان خروجی کار استفاده میشه رو بسازیم و اون رو لینک کنیم به فایل html خودمون و بعد دستور زیر رو در ترمینال وارد میکنیم :
npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch
حالا برنامه ما آماده اجرا هست و کافیه فایل index.html خودمون رو در لایو سرور اجرا کنیم و حالا هر تغییری که در فایل html ایجاد کنیم به صورت آنلاین و خودکار رسد و اعمال میشه و اصلا به همین خاطر ما آخر دستورمون نوشتیم watch--
🟢 نکته : ما میتونیم عوض اینکه هر بار دستور بالا رو در ترمینال وارد کنیم بیایم در فایل package.json یک کلید مختص همون درست کنیم به این صورت :
"scripts": {
"build": "npx tailwindcss -i ./src/css/input.css -o ./src/css/output.css --watch"
}حالا کافیه هرموقع خواستیم کارو شروع کنیم عوض اون دستور طولانی فقط دستور زیر رو بنویسیم :
npm run build
