Skip to content
Related Articles

Related Articles

Improve Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :