Tailwind CSS Screen Readers

Last Updated : 22 Mar, 2021

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used to improving accessibility with screen readers.

Screen Readers classes:

sr-only: This class is used to hide an element visually without hiding it from screen readers
not-sr-only: This class is used to undo the sr-only class effect.

Syntax:

<svg class="sr-only|not-sr-only">...</svg>

Example:

HTML

<!DOCTYPE html>  
<html> 
<head>      
    <link href=  
    "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet">  
</head>  
  
<body class="text-center">  
<center>  
    <h1 class="text-green-600 text-5xl font-bold">  
        GeeksforGeeks  
    </h1>  
    <b>Tailwind CSS Screen Readers Class</b>  
    <div class="bg-green-200 p-4 mx-16 space-y-4">  
          <span class="sr-only">sr-only</span> 
          <span class="not-sr-only">not-sr-only</span> 
    </div>  
</center>  
</body>  
  
</html> 

Output:

screen readers

Suggest improvement

Tailwind CSS Stroke Width

Share your thoughts in the comments

Tailwind CSS Layout

Tailwind CSS Flexbox

Tailwind CSS Grid

Tailwind CSS Alignment

Tailwind CSS Spacing

Tailwind CSS Sizing

Tailwind CSS Typography

Tailwind CSS Backgrounds

Tailwind CSS Borders

Tailwind CSS Effects

Tailwind Filters

Tailwind CSS Tables

Tailwind CSS Transitions and Animation

Tailwind CSS Transforms

Tailwind CSS Interactivity

Tailwind CSS SVG