How do I hide an element only on mobile using Tailwind CSS?
Asked on Sep 20, 2025
Answer
To hide an element only on mobile using Tailwind CSS, you can use responsive utility classes. Tailwind provides a "hidden" class to hide elements and responsive prefixes like "sm:", "md:", "lg:", and "xl:" to apply styles at specific breakpoints.
<!-- BEGIN COPY / PASTE -->
<div class="hidden sm:block">
<!-- This element is hidden on mobile but visible on screens sm and larger -->
Content visible on sm and larger screens
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "hidden" class hides the element on all screen sizes.
- The "sm:block" class makes the element visible starting from the "sm" (small) breakpoint, which typically represents tablets and larger devices.
- Tailwind's default breakpoints are "sm" (640px), "md" (768px), "lg" (1024px), and "xl" (1280px).
- Adjust the breakpoint prefix as needed to target different screen sizes.
Recommended Links: