Tailwind CSS Screens

You define your project’s breakpoints in the theme.screens section of your tailwind.config.js file. The keys become your responsive modifiers (like md:text-center), and the values are the min-width where that breakpoint should start.

Syntax

<!-- For Screens larger than breakpoint md -->
<div class="hidden md:block">
   <!-- Content for larger screens -->
</div>

Examples

<div class="hidden sm:block">
   <p>This content will be visible on small and larger screens</p>
</div>
<div class="hidden md:block">
   <p>This content will be visible on medium and larger screens</p>
</div>
<div class="hidden lg:block">
   <p>This content will be visible on large and larger screens</p>
</div>

Output

The hidden class hides the content by default but using the block class for screens larger than the breakpoint specified in the class, it makes the content visible.

Explanation

Tailwind CSS screens allow developers to control the visibility of content based on the screen size. This is done by hiding the content by default and showing it only on screens larger than a specified breakpoint.

Use

The hidden and block classes can be combined with the screen size classes such as sm, md, lg, xl and 2xl to control the visibility of content based on the screen size.

Important Points

• The hidden class hides the content by default
• Use the block class to show the content on screens larger than the specified breakpoint
• Screens are specified using the screen size classes such as sm, md, lg, xl and 2xl

Summary

Tailwind CSS Screens provides a way to control the visibility of content based on screen sizes. The hidden and block classes, when combined with screen size classes, allow for precise control over the visibility of content on different screen sizes.