Open In App

Tailwind CSS Screen Readers

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 22 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads