點燈坊

失くすものさえない今が強くなるチャンスよ

Using block and hidden for Responsive Design

Sam Xiao's Avatar 2022-01-02

Using block and hidden with md and lg variant, we can toggle different blocks to display by the device without any JavaScript.

Version

TailwindCSS 3.0

Responsive Design

block000

Displaying iPhone on iPhone.

block001

Displaying iPad on iPad.

block002

Displaying iPad Pro/Macbook on iPad Pro.

block003

Displaying iPad Pro/Macbook on Macbook.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <div class="block md:hidden">iPhone</div>
  <div class="hidden md:block lg:hidden">iPad</div>
  <div class="hidden lg:block">iPad Pro/Macbook</div>
</body>
</html>

Line 10

<div class="block md:hidden">iPhone</div>
<div class="hidden md:block lg:hidden">iPad</div>
<div class="hidden lg:block">iPad Pro/Macbook</div>
  • block : display as block
  • hidden : hide block
  • md : above iPad
  • lg : above iPad Pro

Conclusion

  • This is x-show for responsive design in TailwindCSS

# TailwindCSS