تثبيت سريع Tailwind CSS v4.1

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

Terminal

Set-ExecutionPolicy Unrestricted -Scope CurrentUser

شرح الكود

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

Terminal

npm init -y

شرح الكود

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

Terminal

npm install tailwindcss @tailwindcss/cli

شرح الكود

يستخدم لتثبيت مكتب Tailwind CSS الاصدار 4.1 بالاضافه الى اداة CLI الخاصه بها عبر Npm والتي هي مدير الحزم الخاصه Node js

خارج الـــ Terminal

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

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

في داخل ملف الـــــ input.css ضع هذا الكود

Css

@import "tailwindcss";

شرح الكود

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

ايضاََ في داخل ملف الـــــ input.css ضع هذا الكود

Css

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

شرح الكود

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

أكواد Media Queries إضافية (اختيارية)

Css

@theme {
  --breakpoint-*: initial;
  --breakpoint-xxs:300px;
  --breakpoint-xs:400px;
  --breakpoint-sm:550px;
  --breakpoint-md:750px;
  --breakpoint-lg:992px;
  --breakpoint-xl:1200px;
  --breakpoint-2xl:1536px;
  --breakpoint-3xl:1792px;
  --breakpoint-4xl:2036px;
  --breakpoint-5xl:2300px;
}

شرح الكود

هذه التعديلات على الـ media queries نابعة من تجربة شخصية تهدف إلى تعزيز مرونة الاستجابة وتوفير تحكم أدق في العرض عبر الأجهزة يمكنك استخدامها لتوسيع إمكانيات Tailwind CSS أو الاكتفاء بما توفره المكتبة من قياسات افتراضية حسب ما يناسب مشروعك

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

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

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

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

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

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

Json

  "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"

خطوة مهمة

نقوم بفتح ملف package.json ونستبدل هذا النص

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