Why responsive utilities in tailwindcss is showing opposite output

Saitama 0
Viewed 22

Why sm responsive utility in tailwindcss is showing the opposite output. I believed that using sm is to do something in small devices and smaller devices, however, the sm only applied in medium devices.
Any idea?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="hidden md:block">
      Your device is medium/large [hidden md:block].
    </h1>
    <p class="md:hidden">
      Your device is small [md:hidden].
    </p>

    <h3 class="sm:block hidden">
      Your device is small too [sm:block hidden].
    </h3>
  </body>
</html>

CodeSandbox.

tailwind-css css
1 Answers

In tailwind you should first target mobile devices (like always recommended, since most of clients use mobile).
So general style like bg-red-500 would apply to every screen size, and the media queries (e.g sm), would apply to every screen which is larger than the specified screen size.

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

<pre class="text-red-500 sm:text-blue-500">
What it looks like: This text is red on smaller than 640px screen widths (mobile) and blue on others. 


The exact definition: This text is red on all devices but blue on bigger than 640px screen widths) </pre>

Source:

Mobile First By default, Tailwind uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.

What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.

https://tailwindcss.com/docs/responsive-design

ATP0
Related