Loading...

الصفحة الرئيسة

مصنع الشروحات

مصنع الشروحات 2

مصنع الشروحات 3

مكتبة SAS

أداة تحويل HTML + CSS

أداة إزالة التنسيق

أداة إزالة علامات الترقيم

ضغط الاكواد

انشاء QR Code

دليل قياس االشاشات

شرح رفع على Firebase

شرح تثبيت Tailwind CSS v3.4.17

شرح تثبيت Tailwind CSS v4.1

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

المكتبات الاساسية

خطوة مهمة تثبيت مكتبة Node js

اذا لم تكن مثبتة مسبقاً

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

Terminal

Set-ExecutionPolicy Unrestricted -Scope CurrentUser

شرح الكود

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

Terminal

npm init -y

شرح الكود

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

نموذج توضيحي

SULAIMAN SHO

ARROW

File

ARROW

Edit

ARROW

Selecion

ARROW

View

ARROW

Go

ARROW

Run

ARROW

Terminal

ARROW

Help

package.json

package.json

{

1

"name": "Tailwind Css 4.1",

2

"version": "1.0.0",

3

"main": "index.js",

4

Debug

"scripts": {

5

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

6

} ,

7

"keywords": [ ] ,

8

"author": " " ,

9

"license": "ISC" ,

10

"description":""

11

}

12

PORTS

DEBUG CONSOLE

OUTPUT

TERMINAL

PROBLEMS

PS C:\Users\SULAIMAN SHO\Desktop\Tailwind Css 4.1>

npm init -y

Wrote to C:\Users\SULAIMAN SHO\Desktop\Tailwind Css 4.1\package.json:

{

"name": "Tailwind Css 4.1",

"version": "1.0.0",

"main": "index.js",

"scripts": {

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

},

"keywords": [],

"author": "",

"license": "ISC",

"description": ""

}

PS C:\Users\SULAIMAN SHO\Desktop\Tailwind Css 4.1> SULAIMAN

prettier

Go Live

Js

CRLF

UTF-8

Spaces:4

Ln1,Col 1

EXPLORER

Tailwind Css 4.1

package.json

OUTLINE

TIMELINE

0

0

Terminal

npm install tailwindcss @tailwindcss/cli

شرح الكود

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

نموذج توضيحي

SULAIMAN SHO

ARROW

File

ARROW

Edit

ARROW

Selecion

ARROW

View

ARROW

Go

ARROW

Run

ARROW

Terminal

ARROW

Help

package.json

package.json

{

1

"name": "Tailwind Css 4.1",

2

"version": "1.0.0",

3

"main": "index.js",

4

Debug

"scripts": {

5

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

6

} ,

7

"keywords": [ ] ,

8

"author": " " ,

9

"license": "ISC" ,

10

"description":""

11

}

12

PORTS

DEBUG CONSOLE

OUTPUT

TERMINAL

PROBLEMS

PS C:\Users\SULAIMAN SHO\Desktop\Tailwind Css 4.1>

npm install tailwindcss @tailwindcss/cli

added 41 packages, and audited 42 packages in 6s

added 41 packages, and audited 42 packages in 6s

6 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

PS C:\Users\SULAIMAN SHO\Desktop\Tailwind Css 4.1> SULAIMAN

prettier

Go Live

Js

CRLF

UTF-8

Spaces:4

Ln1,Col 1

EXPLORER

Tailwind Css 4.1

node_modules

package-lock.json

package.json

OUTLINE

TIMELINE

0

0

خارج الـــ Terminal

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

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

نموذج توضيحي

SULAIMAN SHO

ARROW

File

ARROW

Edit

ARROW

Selecion

ARROW

View

ARROW

Go

ARROW

Run

ARROW

Terminal

ARROW

Help

input.css

input.css

src

EXPLORER

Tailwind Css 4.1

node_modules

package-lock.json

src

input.css

package.json

OUTLINE

TIMELINE

0

0

في داخل ملف الـــــ 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 أو الاكتفاء بما توفره المكتبة من قياسات افتراضية حسب ما يناسب مشروعك

نموذج توضيحي

SULAIMAN SHO

ARROW

File

ARROW

Edit

ARROW

Selecion

ARROW

View

ARROW

Go

ARROW

Run

ARROW

Terminal

ARROW

Help

input.css 1

input.css

src

@import "tailwindcss" ;

1

2

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

3

4

@theme {

5

--breakpoint-*: initial;

6

--breakpoint-xxs:300px;

7

--breakpoint-xs:400px;

8

--breakpoint-sm:550px;

9

--breakpoint-md:750px;

10

--breakpoint-lg:992px;

11

--breakpoint-xl:1200px;

12

--breakpoint-2xl:1536px;

13

--breakpoint-3xl:1792px;

14

--breakpoint-4xl:2036px;

15

--breakpoint-5xl:2300px;

16

}

17

prettier

Go Live

Js

CRLF

UTF-8

Spaces:4

Ln1,Col 1

EXPLORER

Tailwind Css 4.1

node_modules

src

input.css

package-lock.json

package.json

OUTLINE

TIMELINE

0

0

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

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

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

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

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

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

نموذج توضيحي

SULAIMAN SHO

ARROW

File

ARROW

Edit

ARROW

Selecion

ARROW

View

ARROW

Go

ARROW

Run

ARROW

Terminal

ARROW

Help

style.css

style.css

css

assets

dist

prettier

Go Live

Css

UTF-8

EXPLORER

Tailwind Css 4.1

dist\assets\css

style.css

node_modules

src

index.html

package-lock.json

package.json

OUTLINE

TIMELINE

0

0

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"

نموذج توضيحي

SULAIMAN SHO

ARROW

File

ARROW

Edit

ARROW

Selecion

ARROW

View

ARROW

Go

ARROW

Run

ARROW

Terminal

ARROW

Help

package.json

package.json

{

1

"name": "Tailwind Css 4.1",

2

"version": "1.0.0",

3

"main": "index.js",

4

Debug

"scripts": {

5

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

6

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

7

} ,

8

"keywords": [ ] ,

9

"author": " " ,

10

"license": "ISC" ,

11

"description": "" ,

12

"dependencies": {

13

"@tailwindcss/cli":: "^4.1.11" ,

14

"tailwindcss": "^4.1.11"

15

}

16

}

17

prettier

Go Live

Js

CRLF

UTF-8

Spaces:4

EXPLORER

Tailwind Css 4.1

dist\assets\css

node_modules

src

package-lock.json

package.json

OUTLINE

TIMELINE

0

0

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

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

نموذج توضيحي

SULAIMAN SHO

ARROW

File

ARROW

Edit

ARROW

Selecion

ARROW

View

ARROW

Go

ARROW

Run

ARROW

Terminal

ARROW

Help

tailwind.config.js

tailwind.config.js

prettier

Go Live

Js

CRLF

UTF-8

Spaces:4

EXPLORER

Tailwind Css 4.1

dist\assets\css

node_modules

src

package-lock.json

package.json

tailwind.config.js

OUTLINE

TIMELINE

0

0

كود مهم جداََ

Terminal

npm run watch

شرح الكود

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

نموذج توضيحي

SULAIMAN SHO

ARROW

File

ARROW

Edit

ARROW

Selecion

ARROW

View

ARROW

Go

ARROW

Run

ARROW

Terminal

ARROW

Help

tailwind.config.js

tailwind.config.js

PORTS

DEBUG CONSOLE

OUTPUT

TERMINAL

PROBLEMS

PS C:\Users\SULAIMAN SHO\Desktop\Tailwind Css 4.1>

npm run watch

> tailwind-css-4.1@1.0.0 watch

> npx @tailwindcss/cli -i ./src/input.css -o ./dist/assets/css/style.css --watch

tailwindcss

v4.1.11

Done in 31ms

prettier

Go Live

Js

CRLF

UTF-8

Spaces:4

EXPLORER

Tailwind Css 4.1

dist\assets\css

node_modules

src

package-lock.json

package.json

tailwind.config.js

OUTLINE

TIMELINE

0

0

الخطوات الاخيرة

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

وانشأ بداخله مجلد اسمه script.js

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

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

وبالطبع انشاء مجلد اسمه index.html

بعد ذلك نقوم بربط الملفات بشكل صحيح كما هو موضح

النموذج النهائي

SULAIMAN SHO

ARROW

File

ARROW

Edit

ARROW

Selecion

ARROW

View

ARROW

Go

ARROW

Run

ARROW

Terminal

ARROW

Help

index.html

index.html

<!DOCTYPE html>

1

<html lang="en">

2

<head>

3

<meta charset="UTF-8">

4

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5

<title>Tailwind Css 4.1</title>

6

<link rel="stylesheet" href="dist/assets/css/style.css">

7

</head>

8

<body>

9

<h1>سبحان الله وبحمده سبحان الله العظيم</h1>

10

<script src="dist/assets/js/script.js"></script>

11

</body>

12

</html>

13

PORTS

DEBUG CONSOLE

OUTPUT

TERMINAL

PROBLEMS

PS C:\Users\SULAIMAN SHO\Desktop\Tailwind Css 4.1>

npm run watch

> tailwind-css-4.1@1.0.0 watch

> npx @tailwindcss/cli -i ./src/input.css -o ./dist/assets/css/style.css --watch

tailwindcss

v4.1.11

Done in 31ms

prettier

Go Live

Js

CRLF

UTF-8

Spaces:4

Ln1,Col 1

EXPLORER

Tailwind Css 4.1

dist\assets

css

style.css

images

js

script.js

svg

node_modules

src

input.css

index.html

package-lock.json

package.json

tailwind.config.js

OUTLINE

TIMELINE

0

0

ختاماََ

سبحان الله والحمد لله ولا إله إلا الله والله أكبر