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 >
Your device is medium/large [hidden md:block].
</h1>
<p >
Your device is small [md:hidden].
</p>
<h3 >
Your device is small too [sm:block hidden].
</h3>
</body>
</html>CodePudding user response：
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 >
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.