Tailwind CSS ਕੀ ਹੈ? ਐਪ ਬਣਾਉਣ ਵਾਲਿਆਂ ਲਈ ਸਰਲ ਗਾਈਡ

Tailwind CSS ਵੈੱਬਸਾਈਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਇੱਕ ਟੂਲਕਿੱਟ ਹੈ। ਵੱਖਰੀ ਫ਼ਾਈਲ ਵਿੱਚ ਵੱਖਰੇ ਸਟਾਈਲ ਨਿਯਮ ਲਿਖਣ ਦੀ ਥਾਂ, ਤੁਸੀਂ ਹਰ ਤੱਤ ਨੂੰ ਛੋਟੇ, ਤਿਆਰ ਕਲਾਸ ਨਾਮ ਦਿੰਦੇ ਹੋ — bg-white ਚਿੱਟੇ ਪਿਛੋਕੜ ਲਈ, p-4 ਪੈਡਿੰਗ ਲਈ, text-lg ਵੱਡੇ ਟੈਕਸਟ ਲਈ, rounded-xl ਗੋਲ ਕੋਨਿਆਂ ਲਈ — ਅਤੇ Tailwind ਬ੍ਰਾਊਜ਼ਰ ਲਈ ਲੋੜੀਂਦਾ CSS ਬਣਾ ਦਿੰਦਾ ਹੈ। ਇਹ ਮੁਫ਼ਤ ਹੈ, ਓਪਨ ਸੋਰਸ ਹੈ, ਅਤੇ ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੇ ਸਭ ਤੋਂ ਆਮ ਤਰੀਕਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

AI ਨਾਲ ਬਣਾਉਂਦੇ ਸਮੇਂ Tailwind ਕਿਉਂ ਅਹਿਮ ਹੈ

ਜੇ ਤੁਸੀਂ AI ਐਪ ਬਿਲਡਰ ਨਾਲ ਵੈੱਬ ਐਪ ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਸੰਭਾਵਨਾ ਚੰਗੀ ਹੈ ਕਿ ਤੁਹਾਡੀ ਐਪ Tailwind ਨਾਲ ਸਟਾਈਲ ਕੀਤੀ ਗਈ ਹੋਵੇ। ਉਦਾਹਰਣ ਲਈ, Mythex ਨਵੇਂ ਪ੍ਰੋਜੈਕਟ Vite + React + TypeScript + Tailwind ਉੱਤੇ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ, ਜਦ ਤੱਕ ਤੁਸੀਂ ਕੁਝ ਹੋਰ ਨਾ ਮੰਗੋ (ਤਕਨੀਕ ਕਿਵੇਂ ਚੁਣੀ ਜਾਂਦੀ ਹੈ)।

ਇਹ ਤਿੰਨ ਤਰੀਕਿਆਂ ਨਾਲ ਤੁਹਾਡੇ ਲਈ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ:

• ਡਿਜ਼ਾਈਨ ਬਦਲਾਅ ਸਸਤੇ ਹਨ। ਕਿਉਂਕਿ ਸਟਾਈਲ ਹਰ ਬਟਨ, ਕਾਰਡ ਅਤੇ ਸਿਰਲੇਖ ਦੇ ਨਾਲ ਹੀ ਹੁੰਦੀ ਹੈ, AI "ਕਾਰਡ ਘੱਟ ਭੀੜ ਵਾਲੇ ਕਰੋ" ਵਰਗੀ ਬੇਨਤੀ ਨੂੰ ਇੱਕ ਥਾਂ ਉੱਤੇ ਕੁਝ ਕਲਾਸਾਂ ਬਦਲ ਕੇ ਪੂਰਾ ਕਰ ਸਕਦਾ ਹੈ।
• ਤੁਸੀਂ ਇਹ ਪੜ੍ਹ ਸਕਦੇ ਹੋ। Tailwind ਦੀਆਂ ਕਲਾਸਾਂ ਸਾਦੀ ਅੰਗਰੇਜ਼ੀ ਦੇ ਨੇੜੇ ਹਨ। text-center font-bold text-2xl ਸਮਝਣਾ ਔਖਾ ਨਹੀਂ, ਭਾਵੇਂ ਤੁਸੀਂ ਕਦੇ ਕੋਡ ਨਾ ਲਿਖਿਆ ਹੋਵੇ।
• ਰੂਪ ਇਕਸਾਰ ਰਹਿੰਦਾ ਹੈ। Tailwind ਵਿੱਚ ਆਕਾਰਾਂ, ਸਪੇਸਿੰਗ ਅਤੇ ਰੰਗਾਂ ਦਾ ਤੈਅ ਪੈਮਾਨਾ ਹੁੰਦਾ ਹੈ। ਇਹ ਐਪ ਨੂੰ 14 ਥੋੜ੍ਹੇ-ਥੋੜ੍ਹੇ ਵੱਖਰੇ ਸਲੇਟੀ ਰੰਗਾਂ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ।

ਰੋਜ਼ਾਨਾ ਦੀ ਇੱਕ ਮਿਸਾਲ

ਘਰ ਦੀ ਪੇਂਟਿੰਗ ਬਾਰੇ ਸੋਚੋ।

ਸਾਦਾ CSS ਹਰ ਕੰਧ ਲਈ ਆਪਣਾ ਰੰਗ ਮਿਲਾਉਣ ਵਰਗਾ ਹੈ। ਤੁਹਾਡੇ ਕੋਲ ਪੂਰੀ ਆਜ਼ਾਦੀ ਹੈ, ਪਰ ਕੁਝ ਸਮੇਂ ਬਾਅਦ ਬੈਠਕ "ਗਰਮ ਚਿੱਟੀ", ਗਲਿਆਰਾ "ਥੋੜ੍ਹੀ ਹੋਰ ਗਰਮ ਚਿੱਟੀ" ਅਤੇ ਕਿਸੇ ਨੂੰ ਯਾਦ ਨਹੀਂ ਕਿ ਕਿਉਂ।

Tailwind ਪੇਂਟ ਦੀ ਦੁਕਾਨ ਦੇ ਰੰਗ-ਚਾਰਟ ਅਤੇ ਲੇਬਲ ਵਾਲੇ ਸਟਿੱਕਰਾਂ ਵਰਗਾ ਹੈ। ਹਰ ਕੰਧ ਉੱਤੇ ਇੱਕ ਸਟਿੱਕਰ ਹੁੰਦਾ ਹੈ — "ਚਿੱਟਾ, ਮੈਟ, 2 ਕੋਟ" — ਅਤੇ ਚਾਰਟ ਸਿਰਫ਼ ਚੁਣੇ ਹੋਏ ਸ਼ੇਡ ਦਿੰਦਾ ਹੈ। ਥੋੜ੍ਹੀ ਆਜ਼ਾਦੀ ਘਟਦੀ ਹੈ, ਪਰ ਕੰਮ ਵਿੱਚ ਲੱਗੇ ਹਰ ਬੰਦੇ ਨੂੰ ਸਟਿੱਕਰ ਪੜ੍ਹ ਕੇ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਹਰ ਕੰਧ ਕਿਹੋ ਜਿਹੀ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

Tailwind ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਵੈੱਬ ਪੰਨਾ HTML (ਸਮੱਗਰੀ ਅਤੇ ਬਣਤਰ) ਅਤੇ CSS (ਦਿੱਖ) ਤੋਂ ਬਣਦਾ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ CSS ਇੱਕ ਵੱਖਰੀ ਫ਼ਾਈਲ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਨਿਯਮਾਂ ਨਾਲ ਹੁੰਦਾ ਹੈ:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwind ਨਾਲ ਤੁਸੀਂ ਇਹ ਨਿਯਮ ਲਿਖਣ ਦੀ ਥਾਂ ਸਿੱਧੇ ਤੱਤ ਉੱਤੇ ਯੂਟਿਲਿਟੀ ਕਲਾਸਾਂ ਲਗਾਉਂਦੇ ਹੋ:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

ਹਰ ਕਲਾਸ ਇੱਕ ਛੋਟਾ ਕੰਮ ਕਰਦੀ ਹੈ। ਜਦੋਂ ਐਪ ਬਣਦੀ ਹੈ, Tailwind ਤੁਹਾਡੀਆਂ ਫ਼ਾਈਲਾਂ ਸਕੈਨ ਕਰਦਾ ਹੈ, ਜੋ ਕਲਾਸਾਂ ਅਸਲ ਵਿੱਚ ਵਰਤੀਆਂ ਗਈਆਂ ਹਨ ਉਨ੍ਹਾਂ ਨੂੰ ਲੱਭਦਾ ਹੈ, ਅਤੇ ਸਿਰਫ਼ ਉਨ੍ਹਾਂ ਲਈ CSS ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਨਾਲ ਅੰਤਿਮ ਸਟਾਈਲਸ਼ੀਟ ਛੋਟੀ ਰਹਿੰਦੀ ਹੈ।

Tailwind ਵਰਜ਼ਨ 4, ਜੋ ਮੌਜੂਦਾ ਵੱਡਾ ਵਰਜ਼ਨ ਹੈ, ਬਹੁਤ ਘੱਟ ਸੰਰਚਨਾ ਨਾਲ ਸੈੱਟ ਹੁੰਦਾ ਹੈ: ਤੁਸੀਂ ਇਸਨੂੰ ਇੰਸਟਾਲ ਕਰਦੇ ਹੋ, ਇਸਦਾ ਪਲੱਗਇਨ ਆਪਣੇ ਬਿਲਡ ਟੂਲ ਵਿੱਚ ਜੋੜਦੇ ਹੋ, ਅਤੇ ਆਪਣੀ CSS ਫ਼ਾਈਲ ਦੇ ਸਿਖਰ ਉੱਤੇ @import "tailwindcss"; ਲਿਖਦੇ ਹੋ। ਬ੍ਰਾਂਡ ਰੰਗਾਂ ਅਤੇ ਫ਼ੌਂਟਾਂ ਵਰਗੀਆਂ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨਾਂ CSS ਵਿੱਚ ਡਿਜ਼ਾਈਨ ਟੋਕਨਾਂ ਵਜੋਂ ਦੱਸੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਨਾ ਕਿ ਵੱਡੀ JavaScript ਕੌਂਫ਼ਿਗ ਫ਼ਾਈਲ ਵਿੱਚ ਜਿਵੇਂ ਪੁਰਾਣੇ ਵਰਜ਼ਨਾਂ ਨੂੰ ਲੋੜ ਸੀ। ਜੇ ਤੁਸੀਂ tailwind.config.js ਦਾ ਜ਼ਿਕਰ ਵਾਲਾ ਪੁਰਾਣਾ ਟਿਊਟੋਰੀਅਲ ਪੜ੍ਹਦੇ ਹੋ, ਤਾਂ ਇਹੀ ਕਾਰਨ ਹੈ।

ਇੱਕ ਕੰਮ ਕੀਤੀ ਮਿਸਾਲ: ਇੱਕ ਪ੍ਰਾਈਸਿੰਗ ਕਾਰਡ

ਮੰਨ ਲਓ ਤੁਸੀਂ ਆਪਣੇ AI ਬਿਲਡਰ ਤੋਂ ਪ੍ਰਾਈਸਿੰਗ ਪੰਨਾ ਮੰਗਿਆ ਹੈ ਅਤੇ "Pro" ਕਾਰਡ ਨੂੰ ਵੱਖਰਾ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਕਾਰਡ ਦਾ ਕੋਡ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੋ ਸਕਦਾ ਹੈ (React ਕੰਪੋਨੈਂਟ ਵਿੱਚ class ਨੂੰ className ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਪੜ੍ਹੋ:

ਜੇ ਤੁਸੀਂ ਕਹੋ "Pro ਕਾਰਡ ਨੀਲੀ ਬਾਰਡਰ ਅਤੇ ਹਲਕੇ ਪਰਛਾਵੇਂ ਨਾਲ ਵੱਖਰਾ ਦਿਖਾਓ", ਤਾਂ AI border-gray-200 ਨੂੰ border-2 border-blue-600 ਅਤੇ shadow-lg ਜੋੜ ਸਕਦਾ ਹੈ। ਬੱਸ ਏਨਾ ਹੀ ਬਦਲਾਅ ਹੈ।

ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਅਤੇ ਡਾਰਕ ਮੋਡ

Tailwind ਸਕਰੀਨ ਆਕਾਰਾਂ ਅਤੇ ਹਾਲਤਾਂ ਲਈ ਛੋਟੇ ਪ੍ਰੀਫ਼ਿਕਸ ਦਿੰਦਾ ਹੈ:

• md:grid-cols-3 — ਮੀਡੀਅਮ ਅਤੇ ਇਸ ਤੋਂ ਵੱਡੀਆਂ ਸਕਰੀਨਾਂ ਉੱਤੇ ਤਿੰਨ ਕਾਲਮ; ਫ਼ੋਨ ਉੱਤੇ ਡਿਫ਼ਾਲਟ ਇੱਕ ਕਾਲਮ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। Tailwind ਮੋਬਾਈਲ-ਪਹਿਲਾਂ ਹੈ: ਬਿਨਾਂ ਪ੍ਰੀਫ਼ਿਕਸ ਵਾਲੀਆਂ ਕਲਾਸਾਂ ਹਰ ਥਾਂ ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ, ਅਤੇ ਪ੍ਰੀਫ਼ਿਕਸ ਵੱਡੀਆਂ ਸਕਰੀਨਾਂ ਲਈ ਬਦਲਾਅ ਜੋੜਦੇ ਹਨ।
• hover:bg-gray-700 — ਮਾਊਸ ਦੇ ਉੱਪਰ ਹੋਣ ਉੱਤੇ ਗੂੜ੍ਹਾ ਬਟਨ।
• dark:bg-gray-900 — ਡਾਰਕ ਮੋਡ ਚਾਲੂ ਹੋਣ ਉੱਤੇ ਵੱਖਰਾ ਪਿਛੋਕੜ।

ਇਸੇ ਕਰਕੇ Tailwind ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਮੋਬਾਈਲ-ਰਿਸਪਾਂਸਿਵ ਲੇਆਉਟ ਜਾਂ ਡਾਰਕ ਮੋਡ ਮੰਗਣਾ ਆਮ ਤੌਰ 'ਤੇ ਤੇਜ਼ ਹੁੰਦਾ ਹੈ।

ਮੁੱਖ ਸ਼ਬਦ

ਆਮ ਗ਼ਲਤਫ਼ਹਿਮੀਆਂ

• "Tailwind ਇੱਕ ਡਿਜ਼ਾਈਨ ਹੈ।" ਇਹ ਨਹੀਂ ਹੈ। Tailwind ਤੁਹਾਨੂੰ ਬਿਲਡਿੰਗ ਬਲਾਕ ਦਿੰਦਾ ਹੈ, ਦਿੱਖ ਨਹੀਂ। ਦੋ Tailwind ਸਾਈਟਾਂ ਬਿਲਕੁਲ ਵੱਖਰੀਆਂ ਦਿਸ ਸਕਦੀਆਂ ਹਨ। "AI ਐਪ" ਵਾਲੀ ਆਮ ਦਿੱਖ ਡਿਫ਼ਾਲਟਾਂ ਤੋਂ ਆਉਂਦੀ ਹੈ, Tailwind ਤੋਂ ਨਹੀਂ। ਆਪਣੇ ਬਿਲਡਰ ਨੂੰ ਅਸਲ ਦਿਸ਼ਾ ਦਿਓ। ਵੇਖੋ AI ਨਾਲ ਚੰਗੀ ਦਿੱਖ ਵਾਲੀ ਐਪ ਕਿਵੇਂ ਡਿਜ਼ਾਈਨ ਕਰੀਏ।
• "ਇਹ ਇਨਲਾਈਨ ਸਟਾਈਲਾਂ ਵਰਗਾ ਹੀ ਹੈ।" ਪੂਰੀ ਤਰ੍ਹਾਂ ਨਹੀਂ। ਕਲਾਸਾਂ ਇੱਕ ਸਾਂਝੇ ਪੈਮਾਨੇ ਤੋਂ ਆਉਂਦੀਆਂ ਹਨ, ਹੋਵਰ, ਡਾਰਕ ਮੋਡ ਅਤੇ ਬ੍ਰੇਕਪੌਇੰਟ ਨੂੰ ਸਹਾਰਦੀਆਂ ਹਨ, ਅਤੇ ਬਿਲਡ ਸਮੇਂ ਆਮ CSS ਵਿੱਚ ਬਦਲ ਜਾਂਦੀਆਂ ਹਨ।
• "Tailwind ਪੰਨਿਆਂ ਨੂੰ ਭਾਰੀ ਬਣਾਉਂਦਾ ਹੈ।" ਬਿਲਡ ਵਿੱਚ ਸਿਰਫ਼ ਉਹੀ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਤੁਸੀਂ ਵਰਤਦੇ ਹੋ, ਇਸ ਲਈ ਵਿਜ਼ਿਟਰਾਂ ਤੱਕ ਪਹੁੰਚਣ ਵਾਲਾ CSS ਆਮ ਤੌਰ 'ਤੇ ਛੋਟਾ ਹੁੰਦਾ ਹੈ।
• "ਲੰਮੀਆਂ ਕਲਾਸ ਸੂਚੀਆਂ ਮਤਲਬ ਗੜਬੜ ਵਾਲਾ ਕੋਡ।" ਸ਼ੁਰੂ ਵਿੱਚ ਇਹ ਭਰੀਆਂ ਲੱਗ ਸਕਦੀਆਂ ਹਨ, ਪਰ ਕਿਸੇ ਤੱਤ ਦੀ ਸਾਰੀ ਦਿੱਖ ਇੱਕ ਥਾਂ ਉੱਤੇ ਹੁੰਦੀ ਹੈ। ਦੁਹਰਾਏ ਜਾਣ ਵਾਲੇ ਪੈਟਰਨ ਆਮ ਤੌਰ 'ਤੇ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਕੱਢੇ ਜਾਂਦੇ ਹਨ, ਜਿਵੇਂ ਇੱਕ Button।
• "Tailwind ਵਰਤਾਂ ਤਾਂ ਕਸਟਮ CSS ਨਹੀਂ ਵਰਤ ਸਕਦਾ।" ਤੁਸੀਂ ਜਦੋਂ ਵੀ ਲੋੜ ਹੋਵੇ ਸਾਦਾ CSS ਲਿਖ ਸਕਦੇ ਹੋ।

ਆਪਣੇ AI ਬਿਲਡਰ ਤੋਂ ਕੀ ਮੰਗਣਾ ਹੈ

• "ਸਾਡੇ ਬ੍ਰਾਂਡ ਰੰਗ ਅਤੇ ਫ਼ੌਂਟ ਇੱਕ ਵਾਰ ਥੀਮ ਟੋਕਨਾਂ ਵਜੋਂ ਦੱਸੋ, ਅਤੇ ਹਾਰਡ-ਕੋਡ ਕੀਤੇ ਰੰਗਾਂ ਦੀ ਥਾਂ ਹਰ ਥਾਂ ਵਰਤੋ।"
• "ਹਰ ਕਾਰਡ, ਬਟਨ ਅਤੇ ਇਨਪੁੱਟ ਇੱਕੋ ਜਿਹੇ ਕੋਨੇ ਦੇ ਘੇਰੇ ਅਤੇ ਸਪੇਸਿੰਗ ਵਰਤੇ।"
• "ਫ਼ੋਨ ਦੀ ਚੌੜਾਈ ਉੱਤੇ ਲੇਆਉਟ ਜਾਂਚੋ ਅਤੇ ਜੋ ਵੀ ਬਾਹਰ ਨਿਕਲੇ ਜਾਂ ਟੈਪ ਕਰਨ ਲਈ ਬਹੁਤ ਛੋਟਾ ਹੋਵੇ, ਠੀਕ ਕਰੋ।"
• "Tailwind ਦੇ dark: ਵੇਰੀਐਂਟ ਨਾਲ ਡਾਰਕ ਮੋਡ ਜੋੜੋ ਅਤੇ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਟੈਕਸਟ ਦਾ ਕੰਟਰਾਸਟ ਪੜ੍ਹਨਯੋਗ ਰਹੇ।"
• "ਦੁਹਰਾਏ ਜਾਣ ਵਾਲੇ ਬਟਨ ਸਟਾਈਲ ਨੂੰ ਇੱਕ ਮੁੜ-ਵਰਤੋਂ ਯੋਗ Button ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਕੱਢੋ।"
• "ਇਸ ਸੈਕਸ਼ਨ ਦੀਆਂ Tailwind ਕਲਾਸਾਂ ਸਾਦੀ ਅੰਗਰੇਜ਼ੀ ਵਿੱਚ ਸਮਝਾਓ।"

Mythex ਵਿੱਚ Tailwind

ਨਵੇਂ Mythex ਪ੍ਰੋਜੈਕਟ ਡਿਫ਼ਾਲਟ ਤੌਰ 'ਤੇ Tailwind ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ, ਨਾਲ React ਅਤੇ TypeScript ਵੀ, ਤਾਂ ਜੋ ਤੁਸੀਂ ਵਿਜ਼ੂਅਲ ਬਦਲਾਅ ਸਾਦੇ ਸ਼ਬਦਾਂ ਵਿੱਚ ਮੰਗ ਸਕੋ ਅਤੇ ਲਾਈਵ Preview ਵਿੱਚ ਵੇਖ ਸਕੋ। ਜੇ ਤੁਸੀਂ ਕੋਡ ਵੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਕੋਡ ਐਡੀਟਰ ਹਰ ਕਲਾਸ ਦਿਖਾਉਂਦਾ ਹੈ (Free ਉੱਤੇ ਸਿਰਫ਼ ਪੜ੍ਹਨ ਲਈ, Pro ਉੱਤੇ ਸੰਪਾਦਨ ਯੋਗ)। ਜੇ ਤੁਸੀਂ ਸਾਦਾ CSS ਜਾਂ ਕੋਈ ਹੋਰ ਸੈੱਟਅੱਪ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਆਪਣੇ ਪਹਿਲੇ ਪ੍ਰੋਂਪਟ ਵਿੱਚ ਦੱਸੋ — ਡੌਕਸ ਦੱਸਦੇ ਹਨ ਕਿ ਸਟੈਕ ਕਿਵੇਂ ਚੁਣਿਆ ਜਾਂਦਾ ਹੈ।

ਸਵਾਲ