Tailwind CSS Screen Readers
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"> w3wiki </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