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>
>Solution :
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 bigger 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