Question 399423 in Html Question posted in
Some basic documentation can be found here.

Html – Responsive layout using Tailwind CSS

I have Figma design for mobile application and for desktop application for my web page. I don’t know how to apply both mobile and desktop versions on my code so when I open the app in my phone only the mobile version will appear and the same for desktop version.

Should I use @media query for that? Or there is another option for doing that? Assume mobile screen width is less then 390 px and desktop is more then 390px. I try using @media but both screens appear when I’m in my computer screen.

Tags:

2

Answers


  1. 0

    If you are using TailwindCSS, they have class prefixes to designate for mobile and desktop screen sizes. Visit the documentation to learn more.

    From the documentation:

    First, make sure you’ve added the viewport meta tag to the of your document:

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

    Then to add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the : character:

    <!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

    There are five breakpoints by default, inspired by common device resolutions:

    Breakpoint prefix Minimum width CSS
    sm 640px @media (min-width: 640px) { ... }
    md 768px @media (min-width: 768px) { ... }
    lg 1024px @media (min-width: 1024px) { ... }
    xl 1280px @media (min-width: 1280px) { ... }
    2xl 1536px @media (min-width: 1536px) { ... }

    This works for every utility class in the framework, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles.

    Login or Signup to reply.
  2. 0

    In Tailwind, there are a series of predefined media query breakpoints. For example, sm means: it doesn’t apply when the window width is less than 640px. It applies when the width is equal to or greater than 640px. Based on this, the effect you need can be achieved with code like the following:

    <script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div>
  <div class="sm:hidden">
    <article class="flex min-h-dvh items-center justify-center bg-amber-200">
      <div class="text-xl">Mobile</div>
    </article>
  </div>
  <div class="hidden sm:block">
    <article class="flex min-h-dvh items-center justify-center bg-sky-200">
      <div class="text-3xl">Desktop</div>
    </article>
  </div>
</div>

    (👆Resize the screen width down to 640px to see mobile screen.)

    Tailwind has another set of breakpoints with the opposite effect, starting with max-*. For example, max-sm has the exact opposite condition of sm. So you can also achieve the same effect in the following way:

    <script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div>
  <div class="sm:hidden">
    <article class="flex min-h-dvh items-center justify-center bg-amber-200">
      <div class="text-xl">Mobile</div>
    </article>
  </div>
  <div class="max-sm:hidden">
    <article class="flex min-h-dvh items-center justify-center bg-sky-200">
      <div class="text-3xl">Desktop</div>
    </article>
  </div>
</div>

    If you need to break exactly at 390px, you can add a custom breakpoint to tailwind.config.ts:

    /** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'mb': '390px',
      // => @media (min-width: 390px) { ... }
    },
  }
}

    Usage: <div class="mb:hidden"></div> or <div class="max-mb:hidden"></div>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search