موقع لشرح تثبيت Tailwind CSS v4.1

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

نسخ Set-ExecutionPolicy Unrestricted -Scope CurrentUser

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

نسخ npm init -y

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

بالإضافة إلى أداة CLI الخاصة بها عبر npm والتي هي مدير الحزم الخاص بـ Node.js

نسخ npm install tailwindcss @tailwindcss/cli

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

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

نسخ input.css

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

ضع هذا الكود

نسخ @import "tailwindcss";

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

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

ضع هذا الكود

نسخ @custom-variant dark (&:where(.dark, .dark *));

يُستخدم لتفعيل الوضع الليلي

صورة توضيحية

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

وانشأ بداخله مجلد اسمه assets

وانشأ بداخله مجلد اسمه css

وبداخل مجلد الــــــ css

قم بأنشاء ملف اسمه style.css

صورة توضيحية

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

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

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

بالنص التالي

نسخ "build": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/assets/css/style.css" , "watch": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/assets/css/style.css --watch"

ننشئ الآن ملف نسميه tailwind.config.js

وظيفة الملف ليقوم بتشغيل الاكستنشن الخاصة بــ tailwind css

موقع الملف بجانب ملف ال index.html

صورة توضيحية

نسخ tailwind.config.js

يقوم هذا الأمر بتشغيل السكربت المحدد مسبقًا في ملف package.json

نسخ npm run watch

الان من باب التنظيم

ننقل ملف index.html

داخل ملف dist

بجانب ملف assets كما هو موضح بالصورة

ثم بعد ذلك ربط ملف style.css

صورة توضيحية

الان داخل مجلد الــــــ assets

نضيف ملف images

و ملف js

بجانب ملف css

صورة توضيحية

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

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

نسخ npm run watch

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

رابط لتحميل الاكستنشن