Mobile View Extension का आइकन Mobile View Extension
Chrome
← सभी लेख

Tailwind responsive design: breakpoints और media queries हिंदी में

Tailwind CSS v4 में रिस्पॉन्सिव डिज़ाइन कैसे काम करता है: डिफ़ॉल्ट breakpoints, mobile first prefix, max और range variants, अपने breakpoints और टेस्टिंग।

Tailwind CSS रिस्पॉन्सिव डिज़ाइन को breakpoint prefix से संभालता है। बिना prefix वाली class, जैसे flex-col, हर साइज़ पर लागू होती है, और prefix वाली class, जैसे md:flex-row, md breakpoint (48rem, 768 px) से ऊपर लागू होती है। इसी वजह से Tailwind डिफ़ॉल्ट रूप से mobile first है: आप फ़ोन का लेआउट सीधे लिखते हैं और बड़ी स्क्रीन के लिए prefix जोड़ते हैं। यह गाइड Tailwind v4 के बारे में है, और जहाँ v3 का syntax अलग है वहाँ नोट दिए गए हैं।

Tailwind CSS v4 के डिफ़ॉल्ट breakpoints

Prefix न्यूनतम चौड़ाई पिक्सेल में (16 px root) बनने वाली CSS
sm: 40rem 640 px @media (width >= 40rem)
md: 48rem 768 px @media (width >= 48rem)
lg: 64rem 1024 px @media (width >= 64rem)
xl: 80rem 1280 px @media (width >= 80rem)
2xl: 96rem 1536 px @media (width >= 96rem)

डिफ़ॉल्ट रूप से कोई xs: prefix नहीं है। बिना prefix वाली स्टाइल ही आपका सबसे छोटा लेआउट है। ये वैल्यू Tailwind responsive design डॉक्यूमेंटेशन में भी देख सकते हैं।

Mobile first prefix कैसे काम करते हैं

एक आम कार्ड लेआउट:

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
  ...
</div>

इसे बाएँ से दाएँ पढ़ें: फ़ोन पर एक कॉलम, 640 px से दो कॉलम, 1024 px से तीन कॉलम और बड़े gap। एक आम ग़लती है sm:grid-cols-1 लिखकर यह उम्मीद करना कि यह फ़ोन को टारगेट करेगा। sm: का मतलब है “640 px और उससे ऊपर”, इसलिए फ़ोन की स्टाइल बिना prefix के लिखी जाती है।

ऊपर-नीचे से एक लाइन में आने वाले हेडर के लिए:

<header class="flex flex-col items-start gap-3 md:flex-row md:items-center md:justify-between">

किसी रेंज या अधिकतम चौड़ाई को टारगेट करना

Tailwind v4 में max-* variants हैं, और उन्हें min-width वाले prefix के साथ जोड़ा जा सकता है:

  • max-md:hidden किसी एलिमेंट को 768 px से नीचे छिपाता है।
  • md:max-lg:flex सिर्फ़ 768 px से 1024 px तक (1024 को छोड़कर) लागू होता है।

कभी-कभार की वैल्यू के लिए arbitrary breakpoints इस्तेमाल करें: min-[900px]:grid-cols-4 या max-[420px]:text-sm। इन्हें कम ही इस्तेमाल करें; अगर कोई वैल्यू कई जगह आती है, तो उसे नाम वाला breakpoint बना दें।

Breakpoints जोड़ना या बदलना

v4 में breakpoints आपकी CSS में तय किए गए theme variables हैं:

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

इससे xs: और 3xl: prefix बन जाते हैं। किसी मौजूदा breakpoint को बदलना हो तो उसे दोबारा तय करें (--breakpoint-md: 50rem;)। किसी डिफ़ॉल्ट को हटाने के लिए उसे initial पर सेट करें।

Tailwind v3 में यही कॉन्फ़िगरेशन tailwind.config.js में theme.screens के नीचे होता है (या डिफ़ॉल्ट बनाए रखने के लिए theme.extend.screens)।

rem वैल्यू इस्तेमाल करें, ताकि breakpoints उन यूज़र्स का ख़याल रखें जो ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट साइज़ बदलते हैं। चौड़ाइयाँ ख़ुद कैसे चुनें, यह रिस्पॉन्सिव breakpoints में बताया गया है।

अपनी CSS में media queries लिखना

कभी-कभी किसी कंपोनेंट को CSS में स्टाइल करना आसान होता है। v4 में वहाँ भी Tailwind के breakpoints इस्तेमाल कर सकते हैं:

.prose-table {
  overflow-x: auto;

  @variant md {
    overflow-x: visible;
  }
}

@variant वही variant नाम लेता है जो आप class के नामों में लिखते हैं, इसलिए @variant lg या @variant dark भी वैसे ही काम करते हैं। media queries के सामान्य syntax के लिए CSS media queries गाइड देखें।

जानने लायक़ दूसरे रिस्पॉन्सिव variants

  • ओरिएंटेशन के लिए portrait: और landscape:।
  • dark mode के लिए dark: (prefers-color-scheme पर आधारित, जब तक आप class वाला तरीका कॉन्फ़िगर न करें)।
  • कम मोशन की पसंद के लिए motion-reduce: और motion-safe:।
  • प्रिंट स्टाइल के लिए print:।
  • v4 में hover: सिर्फ़ उन डिवाइस पर लागू होता है जो hover सपोर्ट करते हैं, इसलिए touch स्क्रीन पर टैप के बाद hover इफ़ेक्ट अब “अटके” नहीं रहते।

Tailwind में container queries

Breakpoints viewport के हिसाब से चलते हैं। Container queries किसी parent एलिमेंट की चौड़ाई के हिसाब से, जो उन दोबारा इस्तेमाल होने वाले कंपोनेंट के लिए सही है जो चौड़े और पतले दोनों तरह के कॉलम में आते हैं। v4 में ये बिल्ट-इन हैं:

<div class="@container">
  <article class="flex flex-col @md:flex-row">...</article>
</div>

यहाँ @md: स्क्रीन की नहीं, container की चौड़ाई (डिफ़ॉल्ट रूप से 28rem) की बात करता है। v3 में इसके लिए आधिकारिक @tailwindcss/container-queries प्लगइन चाहिए।

मोबाइल पर Tailwind लेआउट टेस्ट करना

Tailwind में breakpoints जोड़ना आसान है, और उन्हें जाँचना भूल जाना भी उतना ही आसान। काम करते हुए:

  1. एडिटर के बगल में फ़ोन साइज़ वाला व्यू खुला रखें। Chrome DevTools का device mode चलेगा, और एक-क्लिक मोबाइल व्यू एक्सटेंशन भी, जो localhost पर चलता है और पेज बदलने पर भी फ़ोन का फ़्रेम चालू रखता है।
  2. DevTools के device toolbar में Show media queries चालू करें, ताकि Tailwind के breakpoints पट्टियों के रूप में दिखें और आप हर एक पर पहुँच सकें।
  3. हर breakpoint को उसकी ठीक चौड़ाई पर और उससे 1 px कम पर टेस्ट करें, जैसे 767 px और 768 px।

टेस्टिंग का पूरा तरीका रिस्पॉन्सिव डिज़ाइन कैसे टेस्ट करें में है।

अक्सर पूछे जाने वाले सवाल

Tailwind CSS के breakpoints कौन-से हैं?

डिफ़ॉल्ट रूप से: sm 40rem (640 px), md 48rem (768 px), lg 64rem (1024 px), xl 80rem (1280 px) और 2xl 96rem (1536 px)। हर एक उस चौड़ाई से ऊपर लागू होता है।

Tailwind में सिर्फ़ मोबाइल को कैसे टारगेट करें?

मोबाइल की स्टाइल बिना prefix के लिखें, फिर बड़े साइज़ पर उन्हें बदलें। अगर कोई स्टाइल सिर्फ़ किसी साइज़ से नीचे चाहिए, तो max-sm: या max-md: जैसा max-* variant इस्तेमाल करें।

Tailwind की media queries min-width हैं या max-width?

Min-width। हर डिफ़ॉल्ट breakpoint prefix उस चौड़ाई से ऊपर लागू होता है, और यही mobile first तरीका है।

अपनी अगली वेबसाइट को मोबाइल व्यू में देखें।

मोबाइल व्यू Chrome एक्सटेंशन जोड़ें और जिस टैब पर आप काम कर रहे हैं, उसी के डिवाइस प्रीव्यू खोलें।

Chrome में जोड़ें