let n = 3;
while (n > 0) {
console.log(n--);
}

let x = 10;
do {
console.log(x);
} while (x < 5); // چاپ ۱۰

const colors = ['red', 'green', 'blue'];
for (let c of colors) {
console.log(c);
}

const user = {name: 'Ali', age: 25};
for (let key in user) {
console.log(key, user[key]);
}

<html>
<head>
  <title>صفحه من</title>
</head>

<body>
  سلام!
</body>
</html>

اره خلاصه😉

پشتکار

@layer  components {}

@layer  components {
 .btn{
   display:flex;
   justify-content: center;
   align-items: center;
}
}

@layer  components {
 .btn{
@apply flex justify-center items-center;
}
}

project/
├── index.html
├── about.html
├── contact.html
└── js/
    └── components.js

<div id="header"></div>

<main>
    <h1>صفحه اصلی</h1>
</main>

<div id="footer"></div>

<script src="./js/components.js"></script>

const header = document.querySelector("#header");

header.innerHTML = `
    <header>
        <nav>
            <a href="index.html">خانه</a>
            <a href="about.html">درباره ما</a>
            <a href="contact.html">تماس با ما</a>
        </nav>
    </header>
`;

const footer = document.querySelector("#footer");

footer.innerHTML = `
    <footer>
        <p>© 2026 My Website</p>
    </footer>
`;

text-center md:text-left

Mobile First یعنی اول بهترین تجربه را برای کوچک‌ترین صفحه بساز، بعد امکانات و جزئیات را برای صفحه‌های بزرگ‌تر اضافه کن. این رویکرد هم با فلسفه Tailwind هماهنگ است و هم باعث می‌شود کد مرتب‌تر، قابل توسعه‌تر و کاربرپسندتر داشته باشیم.