Install tailwind css

الاوامر التالية سيتم استخدامها داخل ال Terminal

فتح إمكانية تشغيل جميع السكريبتات دون قيود

Set-ExecutionPolicy Unrestricted -Scope CurrentUser

يُستخدم لإنشاء ملف package.json في مشروع Node.js

npm init -y

يُستخدم لتثبيت مكتبة Tailwind CSS في الإصدار 3

npm install -D tailwindcss@3

يُستخدم لإنشاء ملف إعدادات (تكوين) لمكتبة Tailwind CSS يسمى tailwind.config.js. هذا الملف يسمح لك بتخصيص إعدادات Tailwind CSS لتلبية احتياجات مشروعك

npx tailwindcss init

انشاء مجلد اسمه src

بداخله ملف input.css

input.css

في داخل ملف الـــــ input.css

ضع هذا الكود

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

انشاء مجلد اسمه dist

بداخله ملف style.css

style.css

نقوم بفتح ملف package.json

ونستبدل هذا النص

"test": "echo \"Error: no test specified\" && exit 1"

بالنص التالي

    "build": "npx tailwindcss -i ./src/input.css -o ./dist/style.css" ,
    "watch": "npx tailwindcss -i ./src/input.css -o ./dist/style.css --watch"

نقوم بفتح ملف tailwind.config.js

ونستبدل هذا النص

content: [ ],

بالنص التالي

content: ["./*.html"],

يُستخدم لتحديد نطاق الملفات التي تحتوي على الأصناف (classes) التي ستقوم Tailwind CSS بفحصها واستخدامها لتوليد
CSS مخصص

يُستخدم لتشغيل أحد البرامج النصية (scripts) المُعرفة داخل ملف package.json

npm run watch

النتيجة النهائية لشكل الملفات

قاعدة مهمة يجب في كل مرة تشغيل هذا الامر

npm run watch

اكستنشن خاصة لل Tailwind CSS