Skip to content
Related Articles

Related Articles

Tailwind CSS Screen Readers

View Discussion
Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 22 Mar, 2021
View Discussion
Improve Article
Save Article

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 :

Start Your Coding Journey Now!